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

はてなブログのスマホ記事下に関連記事を表示させたイメージ

カテゴリーの記事をランダムで3件表示させる仕様にしました。ちょっとエンジニアっぽい記事書いてみます。

f:id:kitahashi-ryoichi:20160213115117p:plain

 

参考にしたもの

jitenshaya-se.hatenablog.com

スマホでも動くようにして、デザインをちょっとだけシンプルにしたのと、ちょっとした修正がだれでも出来るように解説してみようと思います。

 

実装方法解説

このコードをデザイン>スマートフォン>記事>記事下にコピペ

はてなブログ記事下関連記事

 

場所はここです

f:id:kitahashi-ryoichi:20160213120244p:plain

 

次に、自分独自の設定をするところを変更します

カテゴリー別の表示件数を変更したいとき

maxEntriesのパラメータを変更することで調節ができます。かんたん!

/* 関連コンテンツ出力 */
 var maxEntries = 3;
エラー画面などのデフォルトカテゴリーを設定する

カテゴリー名をこんな風に入れてください

categorytags = ['Web','食べ歩き','フリーエンジニア'];
説明文表示したいとき

こんな感じでissmpの処理をなくして、デザインを調節します。

説明文を表示したいとき

 

まとめ

はてなブログのスマホデフォだとセッションPVが1.2しかなかったので、その改善策として記事下に関連記事への遷移を追加してみました。かんたんに実装できるので是非使ってみてください!