読者です 読者をやめる 読者になる 読者になる

半地下備忘録

たつさんの日記的ななにか。

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

Web関係のなにか

f:id:tatsu-n:20150130115004j:plain
毎日駄文を書きなぐりはじめて約2週間ほど。投稿数なんてやっと2桁に乗った程度。

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


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

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

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


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

導入方法

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


f:id:tatsu-n:20150130111804p:plain
特に難しいということはなくて、それぞれの意味はこんな感じ。

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

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

表示されるコードをコピー。
f:id:tatsu-n:20150130112536p:plain



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


記事上下のカスタマイズの記事したに先ほどのコードを貼り付ける。そのときに、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>

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