【はてなブログ】記事内に人気記事を表示させるHTMLコード

みなさんこんにちはあやぴんです。

今回は記事や固定ページ内に「人気記事」を表示させる方法をご紹介したいと思います。はてなブログ限定ではありますが、HTMLにコードを追加するだけで簡単にできるのでお試しください。

簡単に人気記事を一覧表示できるんだ！

人気記事を表示させる方法

今回紹介する方法では以下のような人気記事一覧を記事に埋め込むことができます。

人気記事

 

方法

記事編集画面の「HTML編集」から人気記事を挿入したい箇所に以下のコードを入力してください。

<div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-source="access" data-enable_customize_format="0" data-display_entry_category="0" data-display_entry_image="1" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_body_length="0" data-display_entry_date="0" data-display_entry_title_length="20" data-restrict_entry_title_length="0" data-display_bookmark_count="0">
　<div class="hatena-module-title">人気記事</div>
　<div class="hatena-module-body"> </div>
</div>

 たったこれだけで人気記事一覧を表示させることができます。入力したら「プレビュー」より確認することができます。

実はこのコードは「サイドバー」で表示できる「人気記事」とまったく同じ内容のHTMLです。そのため、デザインはサイドバーで表示されるものと同じとなります。

カスタマイズ

人気記事のHTML内の値を変更するだけで見た目のカスタマイズをすることができます。項目が多いのでそれぞれ説明は割愛させていただきます。

が、HTMLを変更してプレビューを押すだけで確認できるので、なれている方はいろいろ変更してみてはいかがでしょうか。

HTML編集でコードを貼り付けるだけで表示可能！

使用用途

以上が人気記事一覧を表示させる方法です。

人気記事の一覧は固定ページに挟むことでより充実したページになると思います。

例えば、「このブログについて」のページであえて記事内に人気記事を表示すると、大きくブログの紹介をすることができますね。

サイドバーやフッターではなく、大きく人気記事を表示させたい場合に使ってみてはいかがでしょうか

まとめ

今回は記事内に人気記事を表示させる方法をご紹介しました。気になった方は試してみてはいかがでしょうか？