ブログのサイドバーに「はてなブックマーク」のブログパーツ「人気記事」を設置する方法

Webサービス & ネタ

ここ最近嬉しいことに、このブログの記事を「はてなブックマーク」に登録して下さる方がいて、記事執筆のモチベーションになっているのですが、他のブログを眺めているとサイドバーに「人気記事(はてブ数)」というブログパーツを設置しているのを見かけることがあり、このブログにも設置してみようと思いつつ調べてみました。

 

「はてなブックマークブログパーツ」  

f:id:lord_cashew:20140315080618p:plain

f:id:lord_cashew:20140315080747p:plain

はてなブックマークブログパーツ

はてなブックマーク公式のブログパーツです。「人気記事を表示」だけでなく「ブックマークコメントを表示」「ブックマーク数を表示」という合計3つのブログパーツが準備されています。

 

実際に設置してみる

それでは「人気記事」のブログパーツを設置してみます。

はてなブックマーク公式ブログパーツのページの「ブログのサイドバーに人気の記事を表示」から「このブログパーツの設定へ」ボタンをクリックします。

 

ブログのURLを入力する画面になりますので「ブログのURL入力欄」にこのブログのURL(http://cashew.hatenablog.com/)をコピペして「送信ボタン」を押します。

f:id:lord_cashew:20140315081237p:plain

ブログパーツの設定画面になります。今回は「タイトル」「種類」「幅」「表示するエントリー数」を設定します。

f:id:lord_cashew:20140315081506p:plain

f:id:lord_cashew:20140315081559p:plain

タイトル:人気記事
種類:人気エントリー
幅:デフォルト(200px)
表示するエントリー:10(記事)

f:id:lord_cashew:20140315081830p:plain

設定が終了したら、画面一番下の「コード(貼り付けタグ)」をコピーします。

 

はてなブログの管理画面に戻って、左のメニューから「デザイン > カスタマイズ > サイドバー」と進んでいきます。

f:id:lord_cashew:20140315082852p:plain

「サイドバー」をクリックして、一番下の「モジュールを追加」をクリックします。

f:id:lord_cashew:20140315082942p:plain

「モジュールを追加」の画面が表示されるので、一番下の「HTML」をクリックします。上の入力欄に「人気記事」と入力し、下の入力欄にコピーした「コード」をペースト(貼り付け)して、「適用」ボタンをクリックします。

f:id:lord_cashew:20140315083046p:plain

一番上の「変更を保存する」ボタンをクリックします。

f:id:lord_cashew:20140315083318p:plain

以上で完了です。人気記事のブログパーツがブログに設置されました。

 

こんな感じに表示される

青い色の上枠がいかにも「はてな」風で良い感じです。ブログのデザインにもよりますが、かなり目立つ感じがします。

f:id:lord_cashew:20140315083549p:plain

 

個人的な感想

このブログパーツは「記事毎のはてなブックマークの数」が人気の判断基準になっているので、記事に「はてブ」がない場合には、とてもさみしい感じになってしまいます。(はてブがゼロの場合には表示されるのかな?未確認) ある程度の期間、ブログを運営して、いくつかの記事に「はてブ」がついてからこのブログパーツを設置したら良いかもしれません。

 

人気記事ブログパーツを設置するメリット

サイドバーに「人気記事」を表示しておくと、訪問者に読まれている記事を自然と目立たせることができます。回遊性が高まれば、1人あたりの閲覧ページ数が増え、ブログ全体の評価にもつながります。具体的には次のような効果が期待できます。

  • 回遊率アップ:おすすめ記事へ自然に誘導でき、滞在時間が伸びやすい
  • 人気記事の可視化:どの記事が支持されているか、運営者自身も把握できる
  • 信頼感の演出:ブックマークが付いた記事を見せることで、安心感を与えられる

設置するときのポイント

ブログパーツは設置して終わりではなく、ブログのデザインや状況に合わせて調整すると効果的です。次の点を意識すると、より自然に馴染みます。

  • 表示件数を欲張りすぎず、サイドバーの長さに合う数に絞る
  • サイドバーの幅に合わせて表示幅を調整し、レイアウトが崩れないようにする
  • ブックマークがある程度付いてから設置すると、さみしい見た目を避けられる

表示が物足りないときの考え方

ブログを始めたばかりでブックマークが少ないうちは、人気記事パーツが空いて見えてしまうことがあります。そんなときは無理に表示にこだわらず、次のように考えると良いでしょう。

  • まずは記事を充実させ、読まれる土台を作ることを優先する
  • アクセス解析と組み合わせ、実際によく読まれている記事を別途おすすめとして紹介する
  • ブックマークが増えてきたタイミングで、改めて設置を検討する

よくある質問

ブックマークが少なくても設置していいですか?

設置は可能ですが、ブックマークがほとんどない状態だと表示がさみしくなりがちです。ある程度ブックマークが付いてから設置すると、見栄えよく活用できます。

どんなブログでも使えますか?

HTMLタグを貼り付けられるブログであれば、多くのサービスで設置できます。ただしサービスによってカスタマイズの自由度が異なるため、サイドバーに自由コードを追加できるか事前に確認しましょう。

表示する記事は自動で入れ替わりますか?

ブックマーク数などの人気度に応じて表示される仕組みのため、状況に合わせて内容は変化します。新しく支持を集めた記事が反映されるので、設置後はそのまま運用できます。

まとめ

サイドバーに人気記事のブログパーツを設置すると、読まれている記事を自然に目立たせ、ブログ内の回遊性を高めることができます。設置の際は表示件数や幅をデザインに合わせて調整し、ある程度ブックマークが付いてからにすると見栄えよく活用できます。まだ反応が少ないうちは記事を充実させることを優先し、土台が整ってきたタイミングで取り入れてみてください。

関連記事

この記事を投稿した人
おしブロ管理人

Web発掘ブロガー。知る人ぞ知る、ちょっと面白くてちょっと便利なWebツール・サービス・レトロデジタルを"発掘"して紹介しています。大手が扱わないニッチな隙間を掘って、「これ面白い!」「やってみたい!」をお届け。

おしブロ管理人をフォローする
Webサービス & ネタ