回遊率アップへの布石！コピペだけで記事直下へ関連記事を設置したよ！

f:id:bumpmania:20160831124027j:plain

どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。

皆さん気付きました？もう気付きましたよね？

f:id:bumpmania:20160831123624j:plain

記事の下に関連記事設置したんですよ！設置しなければと思い続けて早幾年、昨日（今日の夜中）やっと重い腰を上げて設置しました。

これでサイトの回遊率アップ間違いなし！！

しかも今回はですね、ちょっとしたこだわりを持った位置に挿入しており、ちょっとカスタマイズしないと設置できない位置にぶち込んでいます。

参考にしたサイトなども記事の中で紹介していきますのではてなブロガーの方は良かったら参考にどうぞ。

あえてはてなスターの直上に設置
関連記事を挿入するための方法
はてなスターの直上に任意のHTMLを挿入する方法
面倒くさがりの為にコピペ用のコードと設置手順を置いときます
まとめ

あえてはてなスターの直上に設置

何故僕は今回はてなスターの直上に関連記事を設置したのかといいますと、単純に読者の目に届く位置に関連記事を設置したかったからです。

通常のやり方だと、どうしてもはてなスターの下に設置することになってしまうのですが、ぶっちゃけ記事を読んだ人がそこまでスクロールしてくれるかと言われると、多分そうでもないし、良くて半数くらいの人がスクロールしてくれるかという所。

しかし、はてなスターの直上に設置することで記事を読み終わった方なら必ず関連記事に目が行きますよね。

関連記事に目が行くということは、単純に回遊率があがる（かも）しれないということなので、僕は今非常に期待している所。

でもぶっちゃけ、この位置に挿入するために僕は結構な時間を掛けましたよ、だって既存では設置できない位置だし、手作業でいちいち設置するのも面倒くさい。

だからあえて【はてなスターの直上に自動挿入】という部分にこだわりました。

その為には【関連記事を記事下に挿入する】ことと【はてなスターの直上に関連記事を移動させる】必要があったわけですが、そのやり方については下記にて紹介していきます。

はてなスターの直上に任意のHTMLを挿入する方法

はてなブログの設定で記事下に任意のデータを設置する場合、どうしてもはてなスターの下に設置するしかありませんが下記サイトの方法を使えばはてなスターの直上に任意のデータを挿入することが出来ます。

chipspd.hatenadiary.jp

何でこんな凄いこと思いついちゃうんでしょうか！！

これは本当に凄い！！javascriptでデータの位置を移動させてますね。出来ることは知っていましたが、まさかはてなブログで活用している方がいるとは驚き。

このブログ記事内で紹介されているコードを使えば、HTMLだけではなく、ちょっとしたお知らせを挿入することだって出来るので幅広い活用法が期待できます。

面倒くさがりの為にコピペ用のコードと設置手順を置いときます

HTMLをあまりいじることを得意としていない人は『2つのサイトから得たデータを応用する』という事が難しかったりするかもしれないので、とりあえずコピペ一発で【はてなスターの直上に関連記事を設置】するコードを置いておきますね。

【設置する手順】

ダッシュボード > デザイン > カスタマイズ（スパナマーク） > サイドバー　にて関連記事のモジュールを追加
下記で紹介しているコードを　ダッシュボード > デザイン > カスタマイズ（スパナマーク） > 記事 > 記事下　に貼り付け

<style>
.hatena-module-related-entries {
  display: none;
}
</style>

<div id="my-footer">

 <div id="relateArticle"></div>

 <script>
 var timer = setInterval(function() {
     if (typeof jQuery != 'undefined') {
         $("#relateArticle").html($(".hatena-module-related-entries").html());
         clearInterval(timer);
     }
 }, 1000)
 </script>

</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>