やぁん？ヤドクイーンです。
あなたは自分のブログの人気記事・アクセスが多い記事を把握していますか？
人気記事・アクセスが多い記事＝多くの人が読みたい記事と言えると思います。
多くの人が読みたい記事が集まっているページがあればいいなぁと思い、はてなブログでいう「注目記事」だけのページを作成、カスタマイズしました。
コピペで簡単に設置できるので、気になる方はぜひやってみてください！
スポンサーリンク
はてなブログにおける「注目記事」とは？
はてなブログの「注目記事」モジュールでは、注目記事を集計し、サイドバーに表示しています。
注目記事の集計方法は３つあるそうです。
- 最近のアクセス（直近のアクセス数が多い記事を表示します。表示件数の設定数に満たない場合、不足分を新着記事から追加します。）
- はてなブックマークの人気順（はてなブックマーク数が多い記事を順に表示します。）
- はてなブックマークの新着順（はてなブックマークで最近注目されている記事を、新着順に表示します。）
出典：サイドバーに「注目記事」を表示する - はてなブログ ヘルプ
一般的には最近のアクセス数が多いもので表示させている人が多いと思います。
ここで注意なのが、「最近のアクセス数」であって「累計のアクセス数」ではないことです。
あくまでも「最近のアクセス数」なので、新着の記事が上位に来る場合もあります。（はてなブログの場合、更新通知を受けて読者が読むのは新着記事であるため。）
「注目記事ページ」の作成方法
今回作成するのはサイドバーに設置できるものではなく、独立した「注目記事だけのページ」です。
◆先に完成品（見本）を知りたい人はこちらをご覧ください↓
《ヤドめで》人気の記事ランキング
作成は大きく分けて２つの手順を踏みます。
- 注目記事のコードを貼る
- ランキング形式で「順位」をつける
①注目記事のコードを貼る
はてなブログに標準装備されている「注目記事」は以下の場所にあります。
「 デザイン > カスタマイズ > サイドバー > モジュールを追加」
この設定によって表示される「注目記事のコード」を、固定ページ（HTML編集画面）にコピペするだけです。
しかし、この操作だけではコードを確認することができません。
コードを確認するために、一度「注目記事」をサイドバーに表示させて、その部分をGoogleの検証を用いて解析します。
結論として、使用するコードは以下のとおりです。
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="10" data-source="access" data-enable_customize_format="0" data-display_entry_category="0"
data-display_entry_image="1" data-display_entry_image_size_width="130" data-display_entry_image_size_height="100"
data-display_entry_body_length="100" data-display_entry_date="1" data-display_entry_title_length="20"
data-restrict_entry_title_length="0" data-display_bookmark_count="1">
<div class="hatena-module-body"> </div>
</div>
【参考にしたサイト（引用元）】
【はてなブログカスタマイズ】注目記事一覧ページを作る方法「リアルタイム」 （ IT the Best様）
上記のコードを、新規作成した固定ページのHTML編集画面にコピペしたら、サイドバーにある「注目記事」と同じものを固定ページ上に再現できます。
コピペして、上と下に適宜文章を入れたら完成です。
②ランキング形式で「順位」をつける
このままでも完成ですが、せっかくなのでランキング風にしたいので、順位が表示されるように、デザインCSSをいじりました。
以下のコードを「 デザイン > カスタマイズ > デザインCSS」に入力してください。
/* ranking */
.entries-access-ranking{
counter-reset: rank 0;
}.entries-access-ranking-item:before{
counter-increment: rank 1;
content: counter(rank) " ";
background: #fa8072;
padding: 1px 10px;
color: white;
}
【参考にしたサイト（引用元）】
はてなブログで注目記事の順位を表示する方法 （クイックノート様）
赤文字の部分がカラーコードなので、お好きな色に変更できます。
これでカスタマイズ完了！
注意点
コピペで簡単に作成できますが、いくつか注意点があります。
どこかにリンクを設置する必要がある
固定ページなので、通常の記事とは違い、記事一覧には掲載されません。
つまり、このページへのリンクを自分で設置する必要があります。
私のブログの場合は、サイドバーのプロフィールとボトムメニューにリンクを設置しました。
目指すはヤドンの情報No.1サイト
上のやつは実際にサイドバーにあるものです。
画像とみせかけて、ちゃっかりリンクが埋め込まれています（笑）
固定ページで作る方が分かりやすいかも
この方法での設置は固定ページだけでなく、通常の記事ページにも作成できます。
通常の記事ページであれば時系列の記事になるので、他の記事に紛れてしまう可能性があります。
時系列が関係ない独立した固定ページで作ることを推奨します。
なお、固定ページは、はてなブログProでのみ作成可能です。
テーマによっては上手くできないかも
お使いのはてなブログテーマによっては上手くできない可能性もありますのでお気をつけください。
当ブログのテーマは「Haruni」を使用しています。
スポンサーリンク
おわりに
以上が、注目記事のカスタマイズのひとつ、「注目記事だけのページ」の作成方法でした。
他の方法としては、Googleアナリティクスを利用することが考えられます。
Googleアナリティクスを使えば、ブログへの詳細なアクセス状況が分かります。
このアクセス状況をもとに人気記事ランキングを作成することも可能ですが、これは手動での作業になるので手間暇かかります。
その点、本記事で紹介した方法は、一度作ってしまえば自動で更新されるので楽です。
興味がある方はぜひとも取り入れてみてください。
＼ はてなブログProの登録はこちらから ／
あわせて《ヤドめで》の人気ページも見ていってね♡
＼ めっちゃ主張する！ ／