おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

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

f:id:lord_cashew:20131206153903j:plain

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

 

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

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

 

個人的な感想

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