おすすめ記事リスト機能を設置する方法！
はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を設置してみたので
紹介したいと思います。
私のブログは「ナビケーション機能」が設置している関係で、「おすすめ記事リスト機能」はフッターに設置しています。
なぜかというと、ヘッダーに設置すると「ナビケーション機能」が思うように動作しなかったから、フッダーに設置しているわけです。
もし、やり方がおかしいだけならやり方を教えてほしいです。
設置方法
下記の 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>
カスタマイズ
幅いっぱいに表示する方法
下記のCSSをデザインCSS欄に追加すると、画面幅いっぱいにおすすめ記事リストが表示されるようになります。
#recommend-entries {
padding: 0;
}
#recommend-entries-inner {
max-width: 100%;
padding: 0;
}
オススメ記事にタイトルを表示する方法
下記のCSSをデザインCSS欄に追加すると、タイトル部分の文字列が画像の幅に合わせて自動で省略（一行で表示）されるようになります。グラデーションのまま表示したい場合は background と padding を消してください。
#recommend-entries .urllist-title-link {
background: rgba(0, 0, 0, 0.5);
padding: 9px 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
参考にした記事はこちらです。
ありがとうございます。
