ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

FC2ブログの新着記事にサムネイル画像を表示

ブログ』カテゴリの関連記事

スポンサードリンク

当ブログの新着記事一覧にサムネイル画像を表示させてみました。

新着


まずはプリグインの設定で、公式プラグインの追加でフリーエリアを追加。フリーエリア内容の変更に下記を入力。

<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/画像のファイル名.jpgとなっているので赤字部分を抜き出しhttp://~/entry_img_<%recent_no>.jpgに当てはめる。

当サイトでは blog-imgs-62.fc2.com/m/u/s/musiatui となっているので抜き出して

http://blog-imgs-62.fc2.com/m/u/s/musiatui/entry_img_<%recent_no>.jpg

と上記になります。

ファイルの拡張子はjpg以外にも可能。当サイトではpngが多いので、その場合は末尾の拡張子が

http://blog-imgs-62.fc2.com/m/u/s/musiatui/entry_img_<%recent_no>.png

となります。この拡張子は一番多く使う拡張子を設定しておいた方がいいでしょう。記事ごとに拡張子が違うと表示されません。例えばこのブログではjpgの拡張子画像のは新着記事一覧には表示されません。

スタイルシートの末尾に以下を追加。

/* 新着記事サムネイル画像表示 */
.img_recent br {
clear:left;
}
.img_recent img {
float:left;
border: 0;
margin-right:5px;
margin-bottom:5px;
width: 100px;
height: 50px;
}



ブログのサイズに合わせて○px部分を変えてください。

これで基準の設定は終わりです。後は新着記事一覧に表示させたい画像のファイル名をブログのエントリー数と合わせるだけ。

ファイルアップロード→ファイル名変更でファイル名をentry_img_○○○にします。

新着記事2

○○○の部分にはその画像を新着記事一覧表示に出したい記事のエントリーナンバーを入れます。

(例)http://musiatui.blog111.fc2.com/blog-entry-701.html

赤字の部分がエントリーナンバーです。これを設定すれは一番上の画像の様に新着記事に画像が出るようになります。

取り敢えず当ブログでは記事ごとの画像を表示するようにしていますが、それだと毎回ファイル名を変更したりでちと面倒。なので記事の系統ごとに使う画像を予め決めておいて表示させるのもひとつの手かもしれません。

参考したサイトはブログの弄りで何度も世話になっている所。

>>新着記事にサムネイル画像表示 - FC2ブログのテンプレート工房

 ブログ

 FC2 カスタマイズ ブログ 新着記事

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック