サイドバーに表示する記事一覧モジュールの高度なカスタマイズ

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

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

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

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

デフォルトで 設定できる、アイキャッチ(サムネイル)画像、投稿日時、記事タイトル、はてなブックマーク数、記事のカテゴリーの6項目について、記事ごとに表示するかどうかをチェックボックスが無効になり、代わりに設定欄に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として取り扱います。

アイキャッチ画像について詳しくは、ヘルプ「アイキャッチ画像(記事のサムネイル)」をご確認ください。ブログごとのアイキャッチ画像については、ヘルプ「ブログの詳細設定ページ」で解説しています。

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により異なります)