サイドバーに追加できる「最新記事」「関連記事」「注目記事」の各記事一覧モジュールでは、変数を用いた「高度なカスタマイズ」により、タイトルや投稿日時などの表示順を変更したり、任意のHTMLを記述したりできます。
高度なカスタマイズは、HTMLやCSSの知識を持っており、デフォルトの記事一覧のスタイルがわかる方を対象としています。はてなでは、デザインやレイアウトのカスタマイズに関してサポート対象としておりませんのでご了承ください。
記事一覧モジュールで「高度なカスタマイズ」を利用する方法
管理画面 >[デザイン] > [サイドバー]の「モジュールを追加」から「最新記事」「関連記事」「注目記事」の各モジュールの設定ウィンドウを開き、「高度なカスタマイズを使う」のチェックボックスをチェックします。
「高度なカスタマイズを使う」にチェックを入れると、デフォルトで 設定できる以下の項目が無効になります。
- サムネイル画像を表示する
- 投稿日時を表示する
- ブックマーク数を表示する
- カテゴリーを表示する
- タイトルを表示
- 記事の概要か本文を表示する
代わりに設定欄にHTMLテンプレートを記述できるようになります。
「高度なカスタマイズ」で利用できる変数
「高度なカスタマイズ」では、次の変数を利用できます。モジュールの設定ウィンドウで「利用可能な変数」をクリックするとその場で確認できます。
| 変数 | 説明 |
|---|---|
{Title} |
記事タイトルに置き換わります。 |
{Permalink} |
記事のパーマネントリンクのURLに置き換わります。 |
{Description} |
記事の概要(未入力時は記事本文の冒頭300文字を表示)に置き換わります。 |
{Date} |
記事の投稿日時に置き換わります。 |
{BookmarkCount} |
記事のはてなブックマーク数を表す画像（*1）に置き換わります。 |
{CategoryLinks} |
記事に設定されたすべてのカテゴリー（*2）に置き換わります。 |
{EntryBody} |
記事の本文冒頭の50文字に置き換わります。 |
{ImageURL} |
記事のアイキャッチ（*3）のサムネイル用画像のURLに置き換わります。また、モジュールの設定「サムネイル画像を表示する」で指定したサイズにトリミング・リサイズされます。 |
デフォルトのモジュール設定では、記事タイトルおよび記事本文の表示文字数を設定できますが、「高度なカスタマイズ」を用いる場合にはタイトルは全文、本文は50文字で固定となります。
それぞれの変数は、基本的に表している内容の文字列に置き換わり、タイトルが付けられていなかったときなどにはデフォルトと同様に処理します。ただし、HTMLに展開される変数もあり、以下のヒントを参考にしてください。
*1 はてなブックマーク数（{BookmarkCount}）のヒント
「はてなブックマーク」が提供するAPIを用いてブックマーク数を画像で取得し、記事のエントリーページへのリンクとして次のように展開します。
<a href="http://b.hatena.ne.jp/{エントリURL}">
<img src="https://b.hatena.ne.jp/entry/image/{エントリURL}"></a>
*2 記事に設定されたカテゴリー（{CategoryLinks}）のヒント
記事に設定されたカテゴリー名を、次のようにカテゴリー別記事一覧ページへのリンクとして展開します。複数のカテゴリーが設定されている場合には、設定された順にすべて並べて表示します。
<a class="urllist-category-link {モジュールの種類}-category-link category-{カテゴリー名}"
href="http://{ブログURL}/archive/category/{カテゴリー名}">{カテゴリー名}</a>
*3 記事のアイキャッチ（{ImageURL}）のヒント
記事に「アイキャッチ画像」が設定されていない場合は、ブログごとに設定された「アイキャッチ画像」を表示し、それもなければはてなブログのデフォルトの「アイキャッチ画像」を表示します。
画像は、モジュールの設定「サムネイル画像を表示する」で指定したサイズにトリミング・リサイズされます。サイズの指定がない場合や、指定可能な範囲を超えた場合、200pxとして取り扱います。
サイズを調整したい場合には、CSSでスタイルを設定してください。
アイキャッチ画像の詳細については「アイキャッチ画像を設定する」をご確認ください。
HTMLテンプレートの記述サンプル
デフォルトの記事一覧と同じ順序で、6つの項目すべてを表示するHTMLテンプレートのサンプルは、以下のようになります。
<a href="{Permalink}" class="urllist-image-link">
<img src="{ImageURL}" alt="{Title}" class="urllist-image">
</a>
<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 class="urllist-entry-body">{EntryBody}</div>
これを「最新記事」モジュールの設定ウィンドウで「高度なカスタマイズを使う」の下のテキストエリアに記述して保存すると、ブログのサイドバーの記事一覧は次のように表示されます。
サンプルコードを入力した場合のイメージ
（見た目はテーマやデザインCSSにより異なります）