f:id:dreamark:20160619052601p:plain

昨日はこのブログにも記事下に関連記事を表示しようと考えていました。はてなブログで記事下に関連記事を表示させる方法としては、はてなブログユーザーの有志が作って下さったプラグインから、Milliard等の外部の関連記事プラグインまで結構あります。
一番簡単なのは、はてなブログのサイドバーモジュールの一つで、同じカテゴリーの関連記事を表示させる方法です。これは記事ページのみに表示される機能で、サイドバーにしか表示できません。
外部読み込みの必要がないので、これを記事下にも表示出来れば良いのですが、なかなかもどかしい所です。

注目記事モジュールだと読み込み形式のようになっているので、HTMLを抜き出して記事下に貼り付ければ良いのですが、これだとカテゴリが選べません。
やはり記事下には関連する記事の方が回遊率が良いので、どうしても同じカテゴリの記事をはりたいわけです。

この記事ははてなブログユーザー向けの記事です。

サイドバーモジュールの関連記事を移動させる

そこで、やはり上記のようなプラグインで考えていたのですが、先日私が書いた記事でAdSenseを移動させるというコードを書きました。

www.dreamark.tokyo

これを使えばサイドバーの関連記事も移動できるのでは？と思いつきました。そこで実際に試してみると。

f:id:dreamark:20160619040928p:plain

あまりにも簡単に出来てしまいました。しかし上のコードだとレスポンシブ用なので少し書き換えてみました。下のjQueryがそれなのですが、かなりシンプルなコードになりました。もう少しシンプルに出来そうですが今回はこれで。

<script type="text/javascript">
$(function(){
  $(window).on("DOMContentLoaded", function(){
        $('.hatena-module-related-entries').insertAfter('.social-buttons');
  });
})(jQuery);
</script>

jQueryをはてなブログ内で始めて使う人は上記のコードの上に下記のコードを貼り付けてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

コードを貼り付ける

上のjQueryコードを
ダッシュボード→設定→詳細設定→headに要素を追加に貼り付けします。
この機能を使うには、サイドバーにあらかじめ関連記事モジュールを追加しておく必要があります。後はカテゴリ分けしてないと多分関連記事自体が表示されないと思います。

ちなみに、今回はシェアボタンの下に表示させています。
「.insertAfter('.social-buttons');」がその部分です。
シェアボタンのブロックの後に挿入するコードです。
※シェアボタンをカスタマイズしている人は以下を参考にコード変更必須
※シェアボタンを上下に出してる場合は上下両方に関連記事が表示されます。

他の位置に表示させたい場合は

表示させたい部分の前にあるクラス名やID名を記入します。
「.insertAfter('class名かID名を記入');」

例：記事の終わったすぐ後に関連記事を表示する場合
「.insertAfter('.entry-content');」

f:id:dreamark:20160619043347p:plain
これで記事が終わってすぐ下に関連記事が表示出来ています。もちろんレスポンシブデザインでも同じ表示。
自分の好きな位置を指定するだけで関連記事を移動出来ます。場所によっては表示が崩れる事もあります。
指定する名前が複数ある場合は全ての部分に関連記事が表示されます。
後は試す時間がなかったので分からないのですが、テーマの方でモジュールwidthを100%で指定してない場合は、小さく表示されてしまうかもしれないです。

問題点としては記事をランダムには表示出来ないようです。
日付が新しい記事から順番に表示されます。ですが、表示されているページと同じページは表示されないのは良いですね。

はてなブログの公式モジュールなので、もちろん相性は抜群。管理がはてなブログのダッシュボードからできるのが便利です。記事数は５件まで。サムネイル表示や投稿日時、ブックマーク数、カテゴリー、本文も表示可能。私のブログでは参考のために全て表示してみました。
f:id:dreamark:20160619044046p:plain