チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】記事下に「関連記事」を表示させました|「あわせて読みたい」の設置

 スポンサード リンク

 ネットサーフィンしてると、記事下に「あわせて読みたい」とか「関連記事」というのを設置してあるブログを良く見かけます。

 私だけかもしれませんが、本文を読み終わった後に関連記事が表示されていると、リンク先の記事も見てみよっかなって思ったりすることがあるんですよねぇ。

 これは直帰率改善に役立ちそうなので、私のブログでも是非取り入れたいなと思ったわけです。

 で、調べてみたらこんな記事を発見!!

 読んでいる記事と同カテゴリ内の記事をランダムで表示出来るみたい。

 こういうの作れる人、ほんとスゲーなって思います。

 ということで、ありがたく使わせていただくことに。


<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','あわせて読みたい');
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

 上が実際に私のブログに記述したコードです。(「デザイン」の記事下に記入しました)

 feedlyの購読ボタンはいらないかなと思ったので、消させていただきました。

 これを設置したい場所に貼り付ければOK。


f:id:chipsforest:20150710203401j:plain:w400

 あと、「あわせて読みたい」って書いてあるところのデザインは変更出来るみたい。

 「はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから」に、CSSのclass名は「hatena-module-foot」になっているという記述があり、「あわせて読みたい」部分は「h3」タグを使用しているっぽいので、


.hatena-module-foot h3{
padding-left:10px;
margin-top:20px;
font-size:120%;
line-height:200%;
border-left: 10px solid #444B99;
background-color: #E6E6E6;
}

 このコードを「設定」→「詳細設定」→「headに要素を追加」の中に記入。

 あっ、このコードそのまま貼り付けると当ブログの「h3」のデザインになってしまうので注意です(汗。

 {}内はご自分のブログのデザインに合わせるといいんじゃないかなと思います。


f:id:chipsforest:20150710203426j:plain:w400

 無事にデザインも反映され、設置完了!!

 「あわせて読みたいG」作成者に感謝です。

 これで直帰率が改善してくれるといいなぁ。

PAGE TOP