FC2ブログで全記事一覧に画像を表示 1

2019年09月26日

ブログカスタマイズ
2
FC2ブログ
FC2ブログには全記事一覧が表示される機能のついたテンプレートがありますが、そのリストにアイキャッチ画像を表示させるカスタマイズの紹介です。

画像を準備する

まず最初に、リストでそれぞれの記事に表示させる画像を用意します。

スマホでの閲覧を考慮すると、縦横ともに80pxから120pxくらいのサイズが良いと思います。

テンプレートでよく使われる関連記事リストやサイドバーの最新記事の画像のような感じになり、表示サイズはスタイルシートでも調整出来ます。

画像を決めてリサイズしたら、必ずTinyPNGSquooshのようなwebサービスやソフトを使って、ファイル容量を小さくします。

画像ファイル名を決める

今回のカスタマイズの最大のポイントが、この画像ファイル名です。

FC2ブログには記事内の画像を表示させる<%topentry_image><%topentry_image_72>といった独自変数がありますが、それぞれの変数は使用可能な領域でのみ有効で、全記事一覧を表示させる領域で使用できるサムネイル変数はありません。

そこで全記事一覧内の各記事番号の独自変数である<%titlelist_eno>の通番を画像ファイル名に入れることで、全記事一覧用の画像ファイルにする事が可能になります。

ファイル名はs-1,s-2,s-3...とかentry-1,entry-2,entry-3...あるいはtitlelist-1,titlelist-2,titlelist-3...など、任意の覚えやすい文字列を通番の前後に入れます。

私の場合を例に挙げるとhttps://blog-imgs-131.fc2.com/l/i/f/lifeisfantastic/entry120_120-<%titlelist_eno>.jpgというファイルアドレスで、この中のentry120_120-の部分が任意で付加した文字列です。

画像ファイルのアップロード

任意の文字列と<%titlelist_eno>に相当する通し番号を入れてファイル名を変更したら、管理画面のファイルアップロードでサーバーに登録します。
MEMO

アップロードした画像はフォルダを作成してPCか外付けHDに保存することをおすすめします。

次回の内容はリスト内のレイアウトです。

FC2ブログで全記事一覧に画像を表示 2

画像ファイルをアップロードしたら、全記事一覧のリストをどんな風に表示させるか考えてみます。...

2 件のコメント

まだコメントはありません

-

2021/02/08 (Mon) 22:39

203: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2021/02/09 (Tue) 23:08
ススム

204: To 非公開コメントさん

はじめまして。
>試みましたが、そもそもファイルネームの変更で”<>”は使えませんとされて実行できません。

画像ファイル名の中に記事番号を通番にして含めてください。
この記事内で紹介している私の方法は、「entry120_120-」の後に記事番号をつけています。
記事のURLの最後が「~/blog-entry-1.html」なら、記事番号は「1」ですから画像ファイル名は「entry120_120-1」です。
記事のURLの最後が「~/blog-entry-20.html」なら、記事番号は「20」ですから画像ファイル名は「entry120_120-20」です。
※「」は含めません。

記事数の分だけ画像ファイルを用意して、任意のファイル名に上記のように通番を含めてサーバーにアップロードします。
通番になる記事番号以外の部分はご自身で自由に決めてください。

画像をアップロードした後に、テンプレートのHTMLで独自変数の<%titlelist_eno>で画像を指定することで、全記事一覧に反映させることができます。

ただ、非公開コメントさんのテンプレートを拝見すると、全記事一覧の部分をカスタマイズできない仕様みたいですね。
現在ご使用中のテンプレートで全記事一覧の部分だけ差し替えることはおすすめできませんので、このカスタマイズを利用するには全記事一覧をカスタマイズできるテンプレートに変更した方が使いやすいと思います。

または、現在ご使用中のテンプレート製作者様にお尋ねください。