Nekonote

Nekonote(ねこのて)もかりたい

【はてなブログ】注目記事 は フッタに表示するのがいい かもしれない【アクセスアップ】

このエントリーをはてなブックマークに追加

はてなブログでは、サイドバーで簡単に別の記事への導線を作れます。

ですが、私のサイトでは、サイドバーはあまり使われていないようでした。

( ˃ ˄ ˂̥̥ )


やること

注目記事 を フッタ に 表示します。

なぜ?

  • 読者の多くは、いま開いている記事を読みたくて訪問してくれています。
    • 別の記事を紹介するのは、記事を読み終えたときが良いと考えました。
  • 読者の多くは、上から下に向かってスクロールしながら記事を読みます。
    • 記事の横(サイドバー)にあっても、目線に入らないと考えました。
  • 関連記事 は、新しい記事で表示されないことが多かったです。
    • 私のアクセスはほとんどが新しい記事なので、この仕様が辛かったです。

やったこと

好きなところに 注目記事 を表示できるテンプレートを作りました。

この方法は、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% 良くなりました (ง⁎˃ ᵕ ˂ )ง⁾⁾
(測定した期間が短いので、ほかの影響かもしれません。けど、うれしい!)


よろしければ、試してみてください ₍๐•ᴗ•๐₎✧


読んでくれて、ありがとうございます!

おわり

おすすめ 記事