はてなブログに関連記事を記事下に表示する方法

毎日駄文を書きなぐりはじめて約2週間ほど。投稿数なんてやっと2桁に乗った程度。

ほぼ日記なんだからそんなに人気が集まることもないとは思いつつも、せっかく来てくれる人が居るなら、ちょっとでも記事を読んでもらいたいと思うもの。ここはいっちょ関連記事でも表示させて、オ・モ・テ・ナ・シ・タ・イ！（字余り

とは思ったものの、はてなブログにはデフォルトで関連記事を表示してくれる機能はないようで、Zenbackの簡単追加はできるみたいだけど、個人的にはロードに微妙に時間がかかったりするので、あんまり好きじゃなかったりする。

ちょっと調べてみると、はてなブログ関連記事ジェネレータはあったんだけど、毎回手動ってのもなんだかちょっとめんどくさい。できれば自動で頼む。

はてなブログ関連記事ジェネレータ

そんなこんなで、色々調べたら、とりあえず簡単・自動・無料っていうぼくの希望を叶えてくれる関連記事を表示するブログパーツ的なものが合ったので紹介しておきますよ（やっと本題に）。

導入方法

LinkWithinというサイトで無料で生成できるパーツを貼り付けるようなかたち。まずはこちらのサイトに登録する。
LinkWithin - Related Posts with Thumbnails

特に難しいということはなくて、それぞれの意味はこんな感じ。

• Email: メールアドレス
• Blog Link: ブログのURL
• Platform: Others
• Width: 表示したい関連記事の数
• My blog has light text on a dark background: 背景が暗くて、文字が明るい場合はチェック

入力したら、GetWidget!をクリック。

表示されるコードをコピー。

ここからははてなブログの操作。はてなブログのダッシュボードのデザイン画面に移動して、カスタマイズの記事を選択。

記事上下のカスタマイズの記事したに先ほどのコードを貼り付ける。そのときに、linkwithin_text='関連記事'を次のように追加する。

<script>
var linkwithin_site_id = 0000000;
linkwithin_text='関連記事'
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

あとは保存して完了。おつかれさまでした。

カスタマイズ系の記事

はてなブログ（テーマ：Natural）に合わせて見出し（H3）のデザインを変更 - 半地下備忘録
はてなブログのテーマNaturalで最新の記事と人気の記事のスタイルを揃えました - 半地下備忘録

スラスラわかるHTML&CSSのきほん

作りながら学ぶ HTML/CSSデザインの教科書