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

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

この記事ははてなブログユーザー向けの記事ですが、コード要素を移動させる考え方はWEBを制作全般に参考になると思います。

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

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

色々と考えた結果、やはり上記のようなプラグインで考えていたのですが、先日私が書いた記事で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>

コードを貼り付ける

この機能を使うには、サイドバーにあらかじめ関連記事モジュールを追加しておく必要があります。後はカテゴリ分けしてないと多分関連記事自体が表示されないと思います。

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

上のjQueryコードを
ダッシュボード→設定→詳細設定→headに要素を追加に貼り付けします。

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

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

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

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

この方法の良い所と悪い所

はてなブログの公式モジュールなので、もちろん相性は抜群。管理がはてなブログのダッシュボードからできるのが便利です。記事数は５件まで。サムネイル表示や投稿日時、ブックマーク数、カテゴリー、本文も表示可能。サイドバーと同じデザインになるのでCSSをいじることなく、見た目の違和感もなく統一感が出ます。もちろんCSSで装飾する事もできる。日付が新しい記事から順番に表示されます。表示されているページと同じページは表示されないのは良いですね。

問題点としては記事をランダムには表示出来ないようです。

~~私のブログでは参考のために全て表示してみました。~~
f:id:dreamark:20160619044046p:plain
現在私のブログではCSSを指定したものを使用しています。PCで２列、スマホで１列になるようにデザインしています。
この記事のシェアボタンの後に表示されている、合わせて読みたいおすすめ記事が今回のコードで表示されている部分です。