【はてなブログ】注目記事 は フッタに表示するのがいい かもしれない【アクセスアップ】
はてなブログでは、サイドバーで簡単に別の記事への導線を作れます。
ですが、私のサイトでは、サイドバーはあまり使われていないようでした。
( ˃ ˄ ˂̥̥ )
やること
注目記事 を フッタ に 表示します。
なぜ?
- 読者の多くは、いま開いている記事を読みたくて訪問してくれています。
- 別の記事を紹介するのは、記事を読み終えたときが良いと考えました。
- 読者の多くは、上から下に向かってスクロールしながら記事を読みます。
- 記事の横(サイドバー)にあっても、目線に入らないと考えました。
- 関連記事 は、新しい記事で表示されないことが多かったです。
- 私のアクセスはほとんどが新しい記事なので、この仕様が辛かったです。
やったこと
好きなところに 注目記事 を表示できるテンプレートを作りました。
この方法は、2カラム や 3カラム に設定している方におすすめです。
注目記事を表示するには、以下を貼り付けます。
<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="24" data-display_entry_image_size_height="24" data-display_entry_body_length="0" data-display_entry_date="0" data-display_bookmark_count="1" > <div class="hatena-module-title">注目記事</div> <div class="hatena-module-body"></div> </div>
見た目を整えて、フッタに表示しました。
デザインを変更する場合は、次の3つを追加します。
- data-enable_customize_format 属性 に
1
を設定する - data-customize_format 属性 に カスタマイズ用のhtml/cssを書きます。
- style 属性 に カスタマイズ用のcssを書きます。
フッタに貼り付けたコードがこちらです。
<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="24" data-display_entry_image_size_height="24" data-display_entry_body_length="0" data-display_entry_date="0" data-display_bookmark_count="1" data-enable_customize_format="1" data-customize_format="<div style='display:flex;align-items:center;'><a href='{Permalink}'><div style='border:1px solid rgba(0,0,0,0.32);border-radius:40px;width:80px;height:80px;opacity:0.94;margin-top:8px;margin-bottom:8px;'><img src='{ImageURL}' alt='{Title}' class='urllist-image' style='padding:8px;border-radius:40px;width:64px;height:64px;'></div></a><div style='padding-left: 16px;'><div class='urllist-date-link'><a href='{Permalink}'><time>{Date}</time></a></div><a href='{Permalink}' class='urllist-title-link'>{Title}</a>{BookmarkCount}<div class='urllist-categories-link'>{CategoryLinks}</div></div></div>" style="max-width: 1000px; margin: 0 auto; padding-left: 30px; padding-right: 30px;" > <div class="hatena-module-title">注目記事</div> <div class="hatena-module-body"></div> </div>
まだ設置から 1日 ですが、直帰率が 6.6% 良くなりました (ง⁎˃ ᵕ ˂ )ง⁾⁾
(測定した期間が短いので、ほかの影響かもしれません。けど、うれしい!)
よろしければ、試してみてください ₍๐•ᴗ•๐₎✧
読んでくれて、ありがとうございます!
おわり