自分のブログに被ブックマーク数を表示するブックマーク数を画像で取得するAPIを利用して、自分のサイトやブログでエントリーがブックマークされた数を表示させることができます。あなたの書いたエントリーについてのコメントを一覧したり、ブックマークしてもらうためのナビゲーションとしてお使いください。 このページでは、このブックマーク数を画像で取得するAPIを利用して、各ブログサービスで被ブックマーク数を表示させる方法を紹介しています。 Blogger 「テンプレート」タブから「現在の内容を編集」欄の <!-- Begin #main --> と <!-- End .post --> に囲まれた以下の部分を次のように編集します。 ... </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </p> ... を ... <

はてなブログでは、デザイン設定画面の「記事上下のカスタマイズ」において、ブログパーツや広告などを記事ページ（1つの記事だけが表示されるページ）に配置する際、そのスクリプト中に使用できる変数を追加しました。 これまでも使用できた記事タイトルや記事URLに加えて、URLエンコードされたブログURLなどを指定できるようになり、ブログパーツなどをより柔軟に設置できます。どうぞご利用ください。 ※はてなブックマークやTwitter、Facebookといったよく利用されるソーシャルプラグインは、同じ「記事」メニューで簡単に表示できます。記事末の関連するヘルプを参照してください。 「記事上下のカスタマイズ」の使い方と変数の一覧 デザイン設定画面の「カスタマイズ」タブで「記事」メニューを開きます。「記事上下のカスタマイズ 」の「記事上」と「記事下」に、HTMLやスクリプトを自由に記述できます。 「記事上下

はてなブログでは、グルメ情報サイトぐるなびのデータと連動し、「構造化データ」に対応しました。レストランの情報を分かりやすく表現でき、読者や検索エンジンに対して記事の内容を正確に伝えられます。旅先で食べたご当地グルメ、行きつけの美味しいお店のレポートなど、グルメ記事を書かれる方におすすめの新機能です。どうぞご利用ください。 本稿では、SEO専門家の辻正浩さんにご協力いただき「構造化データの効果や使い方」についてご紹介いたします。SEOに興味のあるブログ運営者の方には役に立つ内容となっています。記事の後半では、はてなブログでの構造化データの使い方をご紹介します。合わせてお読みください。 本稿の構成 【寄稿】はてなブログならグルメ記事がSEOに有利！ 構造化データのご紹介 はてなブログで構造化データを使うには 【寄稿】はてなブログならグルメ記事がSEOに有利！ 構造化データのご紹介 本パートでは

今まで定期的にドメインパワーを計測していましたが、Googleに記事がインデックスしてもらえないという謎の現象が増えてきたことから、計測しても意味がないような気がして計測していませんでした。 Googleで何が⁉ インデックスされない記事が増え続ける恐怖 - ちゃちゃの備忘録的なブログ そんな僕のブログも最近は久しぶりにGoogleにインデックスしてもらえるようになったことから、じゃあ今のドメインパワーはどうなってるんだ？と言うことで計測してみることに。 今回は2022年４月3日の時点での計測になります。 ドメインパワーとは 最後に計測したドメインパワー ドメインパワーの計測（2022.4月分） ドメイン価値の計測（2022.4月分） ドメインパワーを上げる５つの方法 長くサイト運営をする 質の良い記事を書く 積極的にリライトをする 被リンクを獲得する アクセス数を増やす ドメインパワーを

はてなブログには、ブログ初心者でも使えるたくさんの便利な機能や設定、またおすすめカスタマイズなどがあります。 はてなブログを始めて「これは便利」「これはよく使う」という設定やカスタマイズがあった時には個別で記事にしていましたが、これらの記事を分かりやすくまとめてみましたので、参考にしてもらえればと思います。 こんな人に読んでもらいたい！ ・はてなブログを始めたばかりの人 ・はてなブログの便利な使い方を知りたい人 はてなブログおすすめ設定編 はてなブログに関連記事を表示させる はてなブログで定型文を使ってみる 記事内の任意の場所に読者登録ボタンを設置する 公開した記事を丸ごとコピーして新記事に応用する はてなブログの記事内にリンクを貼る はてなブログでメタディスクリプションを使う 公開した記事を非公開にするには？ ブログのトップに特定の記事を固定して注目してもらう！ カスタムURLを使ってみ

どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る

他人のブログを見ている時に、トップページの記事一覧がタイル状に表示されるように設定してあり、「おしゃれでいいなぁ～」と思ったことはありませんか？ 今回はそんな人のために、cssの記述だけで簡単にトップ画面の記事一覧をタイル状に変更する方法をご紹介したいと思います。 コピペで設定できるようにしているため、とても簡単に設定可能です！ 注意 今回の方法は「はてなブログpro」である事が前提となります。 トップ一覧をカードタイプからタイル状に変更する方法 CSSの記述内容 プレビュー スマートフォン表示は通常にしたい場合 CSSの記述内容 CSSが反映されない場合の対処法 最後に トップ一覧をカードタイプからタイル状に変更する方法 まずは、はてなブログの「設定＞詳細設定」の中にあるトップページの表示形式を一覧形式に変更してください。 CSSの記述内容 CSS /*-----------------

ブログの記事を読んでいると、サイドバーや記事下のプロフィールがとてもおしゃれで、自分も同じように好みのプロフィールにしてみたいと思うことってありませんか？ 今回は、CSSを使ってプロフィールを自分好みにカスタマイズする方法をご紹介していきたいと思います。 はてなブログでのプロフィール編集のご紹介となりますが、記述する場所さえわかればその他のブログでも応用が利くので是非参考にしてみてください！ 注意今回は、はてなブログPROを使用している人を想定して作成されています。 まだ、「はてなブログPRO」を使用していない人は是非おすすめなので、「はてなブログpro」を検討してみて下さい はてなブログproはこちらから！ ドメイン所得がまだの方で取得に迷っている方は是非こちらの記事も参考にしてみてください！ www.rablifes.com 自分好みにのプロフィール作成方法 画像の準備 HTML記述内

気が向いたのでブログを色々模様替えしました。 テンプレートも変えてみました。 今回選んだのはこちら！ hitsuzi.hatenablog.com 人気ナンバーワンのにしただけじゃんって？ そうなんだけど、せっかくだからもっとシンプルな感じにしたかったので、ワンカラムテンプレートにカスタマイズしてみました。 サイドバーの内容は下部分に表示されます。 書いたコードも出しておくので、使いたい方はコピペしてダッシュボードからデザイン→スパナアイコン（カスタマイズ）→デザインCSS で貼り付けてくださいね。 #content{ padding:0 15px; } #main,#box2{ float:none; width:100%; margin-top:60px; } #box2-inner{ display:flex; flex-wrap:wrap; } #box2-inner > div{

はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが

今回は主にはてなブロガーさん向けのカスタマイズ記事になります。 突然ですが、みなさんはどんなSNSを利用しているでしょうか。 ブログを運営するにあたって、SNSというのはとても大事なツールです。 ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。 また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。 そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。 SNSフォローボタンの追加方法 四角形のボタン＋アイコン＋テキスト HTML Twitter Instagram はてな読者登録ボタン デザインcss 円形のボタン＋アイコン HTML デザインCSS 色背景ボタン SNSフォ

この記事でできるようになること 完成イメージは以下の状態 CSSのcontent: counterを使ってみる JavaScriptで行ごとにdivで囲む CSSで付け足したdivごとにカウントアップ [おまけ]コードブロック左上に言語名を表示するCSS この記事でできるようになること はてなブログのコードブロックに行番号を表示 はてなブログのコードブロックの偶数行のみ背景色をつける [おまけ]はてなブログのコードブロックの左上に言語名を表示する 最初は行番号のみで考えていましたがついでに縞々もやってみました。 完成イメージは以下の状態 要件 JavaScriptで追加する方法もあるみたいだけどCSSでやりたい シンタックスハイライトははてな標準で十分 highlight.jsなどのライブラリは使いたくない CSSのcontent: counterを使ってみる body { counter

こういう感じのスタイルシートを当てておいて, pre.code { position: relative; } pre.code[data-lang-label]::before { content: attr(data-lang-label); font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif; font-style: italic; position: absolute; top: 0; right: 0; background-color: #FFFFFF; border-radius: 0 0 0 4px; padding: 0 7px; } pre.code[data-lang-label]:hove

はてなブログにC言語やHTMLなど、様々な言語のソースコードを貼り付ける方法についてご紹介します。 また、ソースコードを表示する際に、「左上に言語名を表示」させたり「行番号を表示」させる方法についても書きたいと思います。 はてなブログにソースコードを貼り付ける方法 「はてな記法」または「Markdown記法」モードで貼り付ける 「見たまま」モードで貼り付ける ソースコードの言語名と行番号を表示させる方法 ソースコードの言語名と行番号を表示させる ダブルクリックでソースコードを全選択させる 表示デザインを変える このブログで使っているデザイン設定 まとめ はてなブログにソースコードを貼り付ける方法 はてなブログにソースコードを貼り付ける場合、主に２つの場合があります。 「はてな記法」または「Markdown記法」モードで編集する 「見たまま」モードで編集する 「はてな記法」または「Markd

はてなブログのサイドバーに設置できる 「注目記事」の一覧に順位を表示してみます。 完成のイメージは下のような形になります。 注目記事の順位表示 CSSの編集 順位を表示するCSS 順位のカウンタ 順位の表示 バッジ型の順位表示にする まとめ CSSの編集 今回設定が必要なのは、CSSのみです。 はてなブログでは、 「管理画面」→「デザイン」→「カスタマイズ」→「デザインCSS」で CSSの編集ができます。 cssの編集 順位を表示するCSS デザインCSSの欄に以下のコードを追記します。 /* ranking */ .entries-access-ranking{ counter-reset: rank 0; } .entries-access-ranking-item:before{ counter-increment: rank 1; content: counter(rank) "

今回は、はてなブログ カスタマイズ記事のまとめです。 これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。 実際の動作と合わせて紹介していくので、取り入れたい記事を探してみてください。 はじめに 今回紹介する内容は「はてなブログカスタマイズの記事一覧」について。 当ブログでは、はてなブログで使える「html」「css」「JavaScript」のコードについて紹介してきました。 紹介していくうち、記事が増えてきたため任意のカスタマイズを探しにくくなっているかもしれません。 そこで、カスタマイズの実装例と合わせてまとめたので、順番に紹介していきます。 かなり長い記事になってしまったので、目次を利用しつつ気になった記事を探してみてください。

9/3追記：その他のカスタマイズ(サイドバー固定など)を増やしました。同じモジュールを並列に使いたい方もわかるように文を若干変更しました。 jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。 難易度はちょい高めです。 実装図 特徴・カスタマイズの注意点 特徴 カスタマイズの注意点 カスタマイズのやり方 手順１　タブに加えるものを決める 手順２　サイドバーをつくる 手順３　タブメニューのjQuery 補足　カスタムHTMLを入れる場合 手順４　CSSでデザインする その他のカスタマイズ タブメニューの下に余白を開ける タブになるまでに一瞬崩れるのを防ぎたい サイドバーに固定したい ブラウザサイズを狭めると、挙動がおかしい タイトルとモジュール部分が近くなっちゃうor離れすぎちゃう 固定された瞬間横幅が広が

はてなブログで記事を書く時に、いつも使う文言ってありますよね？ 僕の場合だと毎回記事の最後に ”最後まで読んでいただきありがとうございます。 よろしければ読者登録よろしくお願いします。” という記事最後にむすび的な文言があります。 また、記事内に差し込んでいるGoogleアドセンスの記事内広告や、読者登録ボタンもその都度HTML編集で書き込んでいるととても面倒くさくて大変です。 そこで今回は、始めからはてなブログに備わっている”定型文の貼り付け”を使って簡単に定型文を作る方法を紹介していきたいと思います。 はてなブログで定型文の作成方法 ステップ１ ステップ２ 定型文の使い方 作成した定型文を編集したい場合 さいごに スポンサーリンク はてなブログで定型文の作成方法 一度作ってしまえば必要な時に何度でも使えるので非常に便利です。 まだ定型文を使ったことが無い方は、是非この機会にやってみてく

先日はてなブログのサイドバーモジュールに新しい機能が追加されましたね。 staff.hatenablog.com 何か出来ないかなあと、カスタマイズを試してみました。 色々な表現が出来ると思うのですが、今回は以下の2点を取り入れたデザインを作ります。 サイドバーのカスタマイズ・サムネイルにリボン（帯）を付ける ・2列表示にする（段組み） 高度なカスタマイズで使える変数 サムネイルにリボン（帯）を付ける 2列表示 カテゴリー日付がある場合 カテゴリーをサムネイル画像上のリボン（帯）に重ねる 高度なカスタマイズで使える変数 使える変数についてははてなブログのヘルプに書いてあります。あまり詳しくはないですがｗさすがはてなはユーザーに丸投げするスタイルですね。 サンプルコードもあるのでそれを参考に使ってみます。 サイドバーに表示する記事一覧モジュールの高度なカスタマイズ - はてなブログ ヘルプ