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

mineoおすすめ契約方法

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

2013.07.27 | カテゴリ:ブログ記事録

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

新着


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

<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  ☑カスタマイズ  ☑ブログ  ☑新着記事

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]
mineo SIM発行手数料請求開始【2017年9月より】 [08月10日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(18)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム
    カテゴリ別記事一覧