ランキングページを作ろう

　はてなブログではサイドバーモジュールとして「注目記事（＝直近アクセス数）」や「はてなブックマーク数」のランキングを表示可能ですが、それらをまとめて独立ページにするとグローバルメニューからリンクできたりして捗ります。

　基本的な考え方は『はてなブログのスマートフォン記事下に公式の注目記事モジュールを表示させて「あわせて読みたい」っぽくする - 太陽がまぶしかったから』と同じです。「任意の場所」に設置可能であれば「記事内」にも設置できるということですね。公式モジュールを流用しているのでメンテナンスフリーで自動更新されていきます。

注目記事モジュールはページ内に存在する特定のHTMLを置き換えるような仕組みになっているため、記事下などの任意の場所に以下のHTMLを書くだけで注目記事が表示されるようになります。

ランキングページの作り方

　「記事を書く」画面の「編集オプション」で分かりやすいカスタムURLを付けます。

　記事内に以下のHTMLを記載します。僕自身はMarkdown記法を使っているため、はてな記法の場合は「#」を「*」にする必要があります。見たまま編集モードの場合はHTMLを直接書いてください。記事ごとにモードを変更できると捗るのだけど。

#はてなブックマーク数ランキング

<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="10"
     data-display_entry_category="0"
     data-display_entry_image="1"
     data-display_entry_image_size_width="115"
     data-display_entry_image_size_height="115"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="1"
     data-source="total_bookmark"
     style="width:100%;box-shadow:none;border:solid 1px #ccc;"
>
  <div class="hatena-module-body" style="width:100%;"></div>
</div>

#注目記事ランキング

<div class="hatena-module hatena-module-entries-access-ranking"
     data-count="10"
     data-display_entry_category="0"
     data-display_entry_image="1"
     data-display_entry_image_size_width="115"
     data-display_entry_image_size_height="115"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="1"
     data-source="access"
     style="width:100%;box-shadow:none;border:solid 1px #ccc;"
>
  <div class="hatena-module-body" style="width:100%;"></div>
</div>

　見た目についてはStyle属性に直接書いていますので調整ください。注目記事の表示処理はクラス名によって動作を判断しているので、表示スタイルのためにクラス名を追加指定するよりも今後の影響が少ないと判断しています。またdata-source属性値を以下のように設定することで表示させるランキングを切り替える事ができます。

パラメータ	意味
recent-bookmark	はてなブックマーク新着
total-bookmark	はてなブックマーク数
access	最近のアクセス数

まとめ

　作成したランキングページについてグローバルメニュー・サイドバー・フッターなどからリンクすることで人気ページを参照してもらいやすくなります。「 他の記事にジャンプ」については id:yuta25 さん作成のサービスを利用させて頂きました。

　アクセス数やブクマ数が多い事では、必ずしも「良質な記事」とは言い切れないのですが、ランキングの配列自体が名刺代わりにもなる側面もあるし、他者から「どう認知されているのか？」という根拠のひとつにはなると考えています。

関連記事

　こちらはAmazonインスタントストアを独立ページとして取り込んでいます。