2017-04-10

サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをできるようにしました

はてなブログでは、サイドバーに追加できる「最新記事」「関連記事」「注目記事」の各記事一覧モジュールにおいて、変数を用いた高度なカスタマイズをできるようにしました。タイトルや投稿日時などの表示順を変更したり、任意のHTMLを記述したりできます。

※高度なカスタマイズは、HTMLやCSSの知識を持っており、デフォルトの記事一覧のスタイルがわかる方を対象としています。はてなブログでは、デザインやレイアウトのカスタマイズに関してサポート対象としておりませんのでご了承ください。

記事一覧モジュールで高度なカスタマイズを利用するには

デザイン設定画面の「カスタマイズ」ページで、「サイドバー」の項目から「最新記事」「関連記事」「注目記事」の各モジュールの設定ウィンドウを開き、「高度なカスタマイズを使う」のチェックボックスをチェックします。

それぞれのモジュール編集画面で「高度なカスタマイズ」にチェックを入れる

デフォルトでは、アイキャッチ（サムネイル）画像、投稿日時、記事タイトル、はてなブックマーク数、記事のカテゴリー、本文の6つの項目について、記事ごとに表示するかどうかをチェックボックスで選択します。高度なカスタマイズを使っているときには、デフォルトの設定項目が無効になり、以下の変数を用いてHTMLのテンプレートを記述します。

高度なカスタマイズで利用できる変数

高度なカスタマイズでは、次の変数を利用できます。モジュールの設定ウィンドウで「利用可能な変数」をクリックするとその場で確認できます。

変数	説明
`{Title}`	記事タイトルに置き換わります。
`{Permalink}`	記事のパーマネントリンクのURLに置き換わります。
`{Date}`	記事の投稿日時に置き換わります。
`{BookmarkCount}`	記事のはてなブックマーク数を表す画像（※1）に置き換わります。
`{CategoryLinks}`	記事に設定されたすべてのカテゴリー（※2）に置き換わります。
`{EntryBody}`	記事の本文冒頭の50文字に置き換わります。
`{ImageURL}`	記事のアイキャッチ（※3）を200px四方にトリミング・リサイズした画像の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}`）のヒント

記事にアイキャッチ画像が設定されていない場合は、ブログごとに設定されたアイキャッチ画像を表示し、それもなければはてなブログのデフォルトアイキャッチ画像を表示します。サイズを調整したい場合には、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>

これを「最新記事」モジュールの設定ウィンドウで「高度なカスタマイズを使う」の下のテキストエリアに記述して保存すると、ブログのサイドバーの記事一覧は次のように表示されます。