はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました
はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました。ヘッダー下に数行の HTML を記述するだけで、よく読まれている記事をまとめブログ風のリスト形式で表示できます。詳細は続きを読むからご覧ください。
設置する手順
設置する手順はたったの1ステップ、以下の HTML を［ヘッダ］→［タイトル下］にコピペするだけです。
<div id="recommend-entries">
<div id="recommend-entries-inner">
<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="320"
data-display_entry_image_size_height="200"
data-display_entry_body_length="0"
data-display_entry_date="0"
data-display_bookmark_count="1"
data-source="access"
>
<div class="hatena-module-body"></div>
</div>
</div>
</div>
表示する記事はどうやって設定するの？
今回追加した「おすすめ記事リスト機能」は、はてなブログの人気記事モジュール .hatena-module-entries-access-ranking の属性値を指定したHTMLさえ書けばどこにでも表示できるという仕様を利用しています。
#recommend-entries の中に表示した人気記事モジュールを、CSSで横並べ＋整形という仕組みです。
…つまり、表示される記事は人気記事（＝おすすめ記事）に基づいて選ばれます。記事の選択はモジュール側が自動で行ってくれるので、手動でタイトルやリンクを書き換えたり選んだりする必要はありません。アイキャッチ画像の選択すら自動です。
デザイン
閲覧する端末によって、表示される件数が0～5まで変わります。
PC（幅1280px～）
表示される記事の件数は5件（人気記事の1位～5位）です。
PC（幅1279px以下）
表示される記事の件数は4件（人気記事の1位～4位）です。
タブレット（1023px以下）
表示される記事の件数は3件（人気記事の1位～3位）です。
タブレット（767px以下）
表示される記事の件数は3件（人気記事の1位～2位）です。
スマートフォン（599px以下）
スマートフォン（幅が599px）では、おすすめ記事を表示すると一番目の記事がファーストビューに入らなくなる（＝ユーザビリティが損なわれる）のでおすすめ記事は表示されません。
カスタマイズ
幅いっぱいに表示
#recommend-entries {
padding: 0;
}
#recommend-entries-inner {
max-width: 100%;
padding: 0;
}
上記のCSSをデザインCSS欄に追加すると、上図のように画面幅いっぱいにおすすめ記事リストが表示されるようになります。
タイトル部分を一行で表示
#recommend-entries .urllist-title-link {
background: rgba(0, 0, 0, 0.5);
padding: 9px 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
上記のCSSをデザインCSS欄に追加すると、タイトル部分の文字列が画像の幅に合わせて自動で省略（一行で表示）されるようになります。グラデーションのまま表示したい場合は background と padding を消してください。
上図は幅いっぱいに表示＋このカスタマイズを併用した図です。
まとめ
何というか、まとめブログ感が強いので好き嫌いが分かれそうな機能ですが、一部の人には間違いなく需要はある＋はてなブログテーマ「DUDE」の似たような機能に惹かれたので自分なりに実装してみました。
ヘッダー下は訪問したときに目がつきやすい場所なので記事への誘導力はかなり高いと思います。最近 Blank ほったらかしですみません…。
