理系男子のIoTライフ

理系男子がプログラミング、テクノロジー、ゲーム、インターネットに関連したネタをしたためます。

【はてなブログ】記事の末尾に関連記事を表示させる方法

今回はブログの記事の末尾に関連記事を紹介する方法についてご紹介します。
f:id:rikei_iot:20170717174427j:plain

関連記事とは?

関連記事はブログ記事末尾にその記事とカテゴリが同じ記事を表示することで、
他のページも閲覧してもらい、ユーザの直帰率を下げる効果があります。

f:id:rikei_iot:20170717174514p:plain


設定方法

本方法は「太陽がまぶしかったから」様のブログ記事を参考にさせていただきました。
本記事の転載時の注意も書いてあるので、一度確認してください。

bulldra.hatenablog.com


まず、デザインの設定画面を開き、「カスタマイズ」を選択し、
ページをスクロールして、記事->記事下を表示します。

f:id:rikei_iot:20170717175214p:plain

記事下の入力欄に以下のスクリプトをコピーします。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>


設定を完了して、編集を終了します。


さらにカスタマイズ

以下ソースコード部分を編集することで、カスタマイズすることができます。

writeGatcha(表示数,パーツID, モード,ヘッダー,購読ボタン有無);
google.setOnLoadCallback(function(){ writeGatchaCategory(パーツID) } );

こんな感じで対応しています。

初期設定 動作
表示数 ソースは3つですが、お好みの表示数に変更できます
パーツID お好きな名前を設定できます
モード categoryはカテゴリから選択、recentは最新のエントリから選択されます
ヘッダー 文頭に表示する文面を変更することができます
購読ボタン trueであり、flaseでなしに変更できます

まとめ

今回ははてなブログで関連記事を表示させる方法についてご紹介しました。
ぜひブログをカスタマイズしてみましょう。

押していただけると励みになりますので、お願い致します。