FC2ブログのテンプレート工房

Hello World Animalsを運営するgallianoさんが、新着記事にサムネイル画像を表示する方法を教えてくださったので紹介します。

gallianoさんのHello World Animalsには、新着記事「New Entry」に画像が表示されています。
記事の度に画像を用意する必要がありますが、視覚的に目に付きやすくなり、自サイトへの有効なリンクになりそうです。


各記事にはそれぞれ記事番号があります。個別記事ページのURLを見れば、その記事の番号が解ります。
～/blog-entry-○○○.html
○○○の部分がその記事の番号です。

その記事のサムネイルとしたい画像のファイルネームを次のようにしてアップロードしてください。
entry_img_○○○.jpg

例えば記事番号が123（URLが ～/blog-entry-123.html）の画像ファイルネームは
entry_img_123.jpg
としてアップロードします。


そしてフリーエリア等の適当なプラグインのHTMLを以下のようにしてください。

<div class="img_recent">
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>">
<img src="
http://～/entry_img_<%recent_no>.jpg"/><%recent_title></a><br />
<!--/recent-->
</div>

http://～/entry_img_<%recent_no>.jpgは、先にアップロードした画像のURLにしてください。

例えば、先にアップロードした画像ファイルのURLが
http://aaa/bbb/ccc/ddd/eee/entry_img_1.jpg
であれば
http://aaa/bbb/ccc/ddd/eee/entry_img_<%recent_no>.jpg
となります。


更にスタイルシートの末尾に以下を加えてください。

/* 新着記事サムネイル画像表示 */
.img_recent br {
clear:left;
}
.img_recent img {
float:left;
border: 0;
margin-right:5px; /* 画像の右余白 */
margin-bottom:5px; /* 画像の下余白 */
width: 60px; /* 画像表示サイズ */
}

画像表示サイズ等の各設定はお好みにあわせて調整してください。
これで新着記事を画像付きで表示できます。

記事の度に画像を用意する必要があるのであまり一般的ではないかもしれませんが、動画紹介サイト等にはとても有効だと思います。

関連記事

• はてなブックマークの表示 (2009/06/24)
• ファビコンの作り方 (2009/06/22)
• 記事文末に広告等を表示（続きを読む＆個別記事） (2009/06/15)
• 新着記事にサムネイル画像表示 (2009/06/15)
• 記事タイトルの最初の一文字を大きくする (2009/06/12)
• アイコン付きサイトマップ（親子カテゴリ対応） (2009/06/09)
• アイコン付きサイトマップ（親子カテゴリ非対応） (2009/06/09)