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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

新着記事にサムネイル画像表示


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; /* 画像表示サイズ */
}


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

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

関連記事
[ 8925 ] ね
コレは毎回アップロードした画像をCSSに書き込まないと駄目ですか?
[ 2011/12/21 11:10 ] [ 編集 ]
[ 8928 ] > ねさん
いえ、一度このカスタマイズを行えば画像アップ毎のcss変更の必要はありません。
[ 2011/12/21 22:38 ] [ 編集 ]
[ 8973 ]
表示される最新記事数を、例えば3つや5つに限定するにはどうすればいいのでしょうか? ファイル名を編集して、表示されないようにするしかありませんか?
[ 2012/01/15 17:17 ] [ 編集 ]
[ 8975 ] > あさん
申しわけありません。一部の最新記事だけにサムネイル画像を表示する方法は私にはちょっと思いつかないです。
私には解りませんでしたがFC2ユーザーフォーラムに聞いてみてもいかがでしょうか。
http://blog.fc2.com/forum_community/
[ 2012/01/15 21:33 ] [ 編集 ]
[ 8976 ]
お返事ありがとうございます。
サイドバーの長さ(これはテンプレートごとに設定されているのでしょうか?)に上限があれば過去の記事からサムネは消えていくようですので、このまま使っていきたいと思います。

ありがとうございました。
[ 2012/01/16 20:47 ] [ 編集 ]
[ 8977 ] > あさん
「サイドバーの長さ」というものがプラグインが表示されるカラムの長さのことを言っているのであれば、それはプラグインの内容に依存します。テンプレートごとに設定しているわけではありません。
[ 2012/01/17 02:13 ] [ 編集 ]
[ 9157 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2012/08/30 13:28 ] [ 編集 ]
[ 9163 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2012/11/21 08:54 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。