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; /* 画像表示サイズ */
}
画像表示サイズ等の各設定はお好みにあわせて調整してください。
これで新着記事を画像付きで表示できます。
記事の度に画像を用意する必要があるのであまり一般的ではないかもしれませんが、動画紹介サイト等にはとても有効だと思います。
- 関連記事
-
