Hike×Hack

「人生をハイキングのように楽しむ」をモットーに、日々の気付きやライフハックについてお伝えしていくブログ

あなたのブログの人気記事が知りたい! ブログのサイドバーに、手軽に人気記事を表示する方法。

f:id:kakesuke:20140411193152j:plain

こんにちは! Hike×Hackのかけすけです!

今日はブログについてのお話です。

私は見ての通り「はてなブログ」でブログを書いているのですが、ブログをはじめた当初、困ったことがありました。

それは、「サイドバーに人気記事を表示するにはどうすればいいのか」ということ。(ここでいう人気記事とは、はてブ数が多い記事を表します。)

ブログの管理画面で「サイドバー」の編集画面を開くと、「最新記事」の表示については最初から明示されているのですが、「人気記事」についてはまったく触れられていないのです。

どうしたものか。およそ1ヶ月前、私は悩みました。どうすれば人気記事を表示させられるのだろうか。

そんなとき、あることを知ります。それは、はてなブログがしっかりと公式で、「はてなブックマークブログパーツ」というものを私たちに与えてくれているということです。

今日は、その「はてなブックマークブログパーツ」を使った「サイドバーに人気記事を表示させる方法」をお伝えしたいと思います。

なあに、とっても簡単なことです。この記事を読みながらでも、おそらく導入までに10分もかからないでしょう。

気に入るか気に入らないかはあなた次第ですが、もし「手軽に人気記事を表示させたい」のであれば、ぜひ導入してみてください。

それでは早速、「はてなブックマークブログパーツ」の使い方を見ていきましょう。

≪1.「はてなブックマークブログパーツ」でHTMLコードを取得しよう≫

まず、サイドバーに貼り付けるべき「HTMLコード」を取得する旅に出かけましょう。なあに、簡単なことです。あなたは自分のブログのURLをコピー&ペーストして、ちょちょっと設定をいじるだけでいいのです。おそらく5分とかからないでしょう。

まずは、「はてなブックマークブログパーツ」のページに訪れます。

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

そうすると、このような画面がまず表示されます。

f:id:kakesuke:20140419165925p:plain

この画面の一番下の項目、「ブログのサイドバーに人気の記事を表示」に目を向けましょう。はやる気持ちをおさえて、「このブログパーツの設定へ」をクリックするのです

するとお望み通り、次の設定画面に飛び移ることができます。さあ。この調子で、源義経よろしく八艘飛びの如くヒョイヒョイと手順を追っていきましょう。

設定画面は、このようになっています。

f:id:kakesuke:20140419165926p:plain

まず最初に入力すべきは、あなたのブログのURLです。もしうっかりして私のブログのURLを入力してしまったら、あなたのブログに私のブログの人気記事が表示されることになります。感謝します。

なんて冗談は差し置いて。あなたのブログのURLを入力してください。そして「送信」をクリックすると、次にこのような画面が現れます。

f:id:kakesuke:20140419165927p:plain

ブログパーツの詳細を設定する画面です。今までとは違った雰囲気です。ワンコピペ・ワンクリックで進めなさそうなムード。

とはいえ、難しく考える必要はありません。あなたが絶対に変更すべき箇所は、たった1つです。

それは、デフォルトでは「新着エントリー」となっているチェックボタンを「人気エントリー」に切り替えるということです。

他にも「ブログパーツの幅」や「ブログパーツのタイトル」などが設定できます。これに関しては、「コレにしよう」というものはありません。あなたのブログのデザインやお好みに合わせてご自由に設定してください。もちろん、その設定も簡単ですのでご安心を。

さて、設定が終わりました。画像に書いてある通り、生成されたコードをコピーしておいてください。(※「URL名」や「タイトル」を変更した場合は、「プレビュー」を押さないとコードに反映されません)

あとは、ブログのサイドバーのHTMLモジュールなどに貼り付ければ完成です。今日は一例として、私も愛用しているこの「はてなブログ」における設置の仕方をお伝えしましょう。

≪2.ブログのサイドバーに貼り付けよう (はてなブログの場合)≫

それでは、はてなブログのサイドバーに設置する方法を見ていきましょう。

まずはサイドバーの編集画面に行かなくては何も始まりません。ブログの管理画面から、「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」まで進んでください。

f:id:kakesuke:20140419165928p:plain

すると、モジュールを設定する画面が表示されます。

f:id:kakesuke:20140419165929p:plain

ここでするべきことは、「HTML」の項目を選択することと、出てきた入力欄にさきほどコピーした「はてなブックマークブログパーツ」のHTMLコードをペーストすることです。

また、この画面には「タイトル」を記入する欄もありますが、すでにブログパーツそのものにタイトルをつけたのであれば、ここは空欄にしておいた方がスッキリとした見た目になります。(タイトルを空欄にしてもしっかりと設置できますので、ご安心ください。)

以上です。

あとはいつも通り、カスタマイズの「変更を保存」をクリックすればサイドバーに人気記事を表示させる手順は完了です。

おめでとうございます。よくぞここまでついてきてくださいました。これで私にも、あなたのブログの人気記事が簡単にわかります。

≪3.あれこれ考えずに、手間もかけずに出来るのが◎≫

今日紹介したやり方でなくとも、「サイドバーに人気記事を表示させる方法」を探してみると、色々なやり方が見つかると思います。もしかしたら、その別の表示方法のほうが、あなたのブログデザインによく合うかもしれません。

ただ、「はてなブックマークブログパーツ」のメリットを挙げるのであれば、それはやはり「手軽」だということ。これといった知識も必要なく、必要最低限の情報を入力するだけでコードが生成されるため、もしあなたがブログをはじめたばかりだとしても、難なく導入することができると思います。

「将来、自分のブログデザインにもっと似合う表示方法にしよう!」と考えていても、「今はまだ、調べたり色々とカスタマイズするのが面倒だ」というのであれば、まずは「はてなブックマークブログパーツ」の導入からはじめてみてもいいかもしれません。

≪まとめ≫

・サイドバーにブログの人気記事(はてブ基準)を載せる方法。

・「はてなブックマークブログパーツ」で手軽に導入できる。

・手間はかからないため、とりあえず設置してみても損はない。

あとがき

体調はすっかり治りまして、今日は宣言通り、昨日投稿する予定だった記事を投稿できました。

今日の記事だけでなく、私が紹介するものは「ググればすぐわかる」ものだったりするのですが、逆にいえば「ググらないと(興味を持たないと)わからない」ものでもあります。

二番煎じの紹介記事も多くなるとは思いますが、読者の方にとっては一番煎じになる可能性もあるので、あまり気にしてはいません。私の記事が、あなたと様々なツールの架け橋になれたらいいな、と思います。

関連記事

はてなブログで、写真付きの過去記事をヘッダに表示させるカスタマイズ方法。 - Hike×Hack

「はてなブログ記事紹介ジェネレータ」で、見やすい記事リンクを! - Hike×Hack

参考記事

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

ブログの人気記事を貼り付ける - はてなブックマークヘルプ