はてなブログで記事下に関連記事を表示させる方法

こんにちは！りさこです！

今回は、記事の下をカスタマイズして、アクセス数の多い記事を表示させてみました！

これで、ふらっとこのブログに来た人が、今までよりたくさんの記事を読んでくれるようになるはずです！笑

関連記事を表示させる方法はいくつかあるみたいですが、今回はその中でも私が気に入ったカスタマイズ方法を紹介します！

他の方法も、気が向いたら後日まとめます！笑

 カスタマイズしてない状態

カスタマイズしてないと、記事の下にはSNSシェアボタン・広告・コメントを書くという表示しかりません。

ここに関連記事を表示させます！

HTMLを書く

まず、デザイン→カスタマイズ→記事→記事下の空欄に

<div class=\"readit\">
<h3 id=\"kiji-shita\">こんな記事も書いてるよ！</h3>
<div class=\"hatena-module hatena-module-entries-access-ranking\"
     data-count=\"5\"
     data-display_entry_category=\"0\"
     data-display_entry_image=\"1\"
     data-display_entry_image_size_width=\"120\"
     data-display_entry_image_size_height=\"120\"
     data-display_entry_body_length=\"0\"
     data-display_entry_date=\"1\"
     data-display_bookmark_count=\"1\"
     data-source=\"access\"
>
  <div class=\"hatena-module-body\">
  </div>
</div>
</div>

と書くと…

広告とコメントを書くの間にアクセス数の多い記事が表示されました！！！！！

実はこれ、サイドバーに表示されている「注目記事」という欄と同じものを記事下にも表示させているんです！

このままでもいいんですが、少し分かりにくいし、あまりおしゃれじゃないので、少しCSSをいじってみましょう！

CSSを書く

「こんな記事も書いてるよ！」というタイトルの部分を目立たせて、全体の文字も大きくしたいと思います。

デザイン→カスタマイズ→デザインCSSの空欄に

#kiji-shita{
    color: grey; 
    background: #FFC0CB;
    border-radius: 5px; 
    padding: 20px 20px;
}

.readit{
    font-size:150%;
}

と書くと…

分かりやすく、そして少しおしゃれになりました！！！！！

タイトル部分のカスタマイズは、記事内の見出しのカスタマイズと同じなので、お好みのデザインにカスタマイズしてみてください！

見出しのカスタマイズ方法はこちら！

matsuda-risako.hatenablog.com

まとめ

いかがだったでしょうか！？

けっこう簡単にカスタマイズできるので、みなさんも関連記事を表示させて読者の方にもっと記事を読んでもらいましょう！

参考にした記事はこちら！

konoyono.hateblo.jp

おわり