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

2019年09月28日

ブログカスタマイズ
3
FC2ブログ

前回までの方法で全記事一覧に画像を表示させる事が出来ますが、必ず守らないといけない注意点があります。

画像ファイルは必ず記事の保存より前にアップロードする

ブログの記事は投稿後に編集や追記または削除が可能で、つまり記事のURLは上書きが可能であることを意味します。

そしてサムネイル用の独自変数である<%topentry_image><%topentry_image_72>は記事の内容に依存するため、表示される画像は変更される(する)事もあります。

ところが今回紹介している全記事一覧で表示させる画像は、任意の文字列に独自変数の<%titlelist_eno>を組み合わせたURLを指定しているため、画像の上書きは出来ません。

しかも、「下書き」や「予約投稿」あるいは「限定」や「非公開」も含め、記事を保存した時点でテンプレートで指定した<%titlelist_eno>を含むファイルURLが存在するという事です。

記事を一気に書いて投稿したけれども、全記事一覧用の画像をアップロードしていないと、その画像で使うべきアドレスを持つURLだけが、画像なしの状態で使われていることになります。

そして、もうすでに使われているURLで画像をアップロードしても上書きされません。

ですから、このカスタマイズを実行するには記事の投稿よりも先に、その記事の全記事一覧用の画像をアップロードする事を習慣にする必要があります。

FC2の投稿画面で直接記事を作成している方は、画像をアップロードするまでは「保存ボタン」はクリックしないようにして下さい。

間違えた時の対処方法

上の項で書いた手順が逆になって画像を表示させられなくなったり、選んだ画像を変更したい時の対処方法を2つ紹介します。

任意の文字列を変更する

指定していた文字列がs-1,s-2,s-3...だったら、s-ss-に変えたり、ハイフンをアンダーバーに変えてs_でも何でもいいので、全ての画像ファイル名を変更した文字列と<%titlelist_eno>に変更して再アップロードします。

その際はファイル名一括変更の様なフリーソフトを利用すると便利です。

MEMO

2つ前の記事で画像の保存をすすめたのはこういう時のためです。
そして変更後はサーバー内の容量を節約するために、使わなくなった文字列を持つ画像ファイルは全て削除することをおすすめします。

記事番号を欠番にする

もっと簡単なのは記事番号を欠番にして、間違えた画像のある記事を全記事一覧に表示させないという方法です。

ただしこれには注意する点があって、最新記事を削除してもその後投稿する記事の番号は変わりません。

例えば記事数が327件あるブログなら、その次に投稿する記事番号は328になりますが、投稿後に328番目の記事を削除しても、その後に投稿する記事は再び328という記事番号になり、URLを含むファイル名を持つ画像は上書きできません。

ですから328の記事を削除する前に、329の記事で使う画像をアップロードして、328の記事内容をコピーして329番目の記事を作成・投稿します。

その後で328の記事を削除すれば327の次は329になり、全記事一覧でも欠番になった記事の分だけ余計なスペースが出来るようなことはありません。

サーバー番号の変更

ここで言うサーバー番号とは、私が全記事一覧用の画像としてテンプレートに書いているhttps://blog-imgs-131.fc2.com/l/i/f/lifeisfantastic/entry120_120-<%titlelist_eno>.jpgの中の131の部分です。

サーバー容量の関係だと思いますが、気がついたら変わっていたという事が、別ブログでは過去に何度かありました。

こうなったら方法は一つだけで、新しいサーバー番号を含むファイル名にするために、任意の文字列を変更した上で全て再アップロードするしかありません。

読み込み速度への影響

記事数が多いブログでこのカスタマイズを実行するとページの表示スピードに大きく影響するため、画像の遅延読み込み機能のないテンプレートでのご利用はお勧めしません。

画像の遅延読み込み機能がないと、全ての画像が表示されるまでの間はローディング中の表示になり、ユーザー離れの原因になります。

画像の遅延読み込みについては、Akira先生の記事に詳しく書かれています。

FC2ブログでのLazyload導入の仕方と注意点【検討編】

Lazyloadは自分との闘いです(笑) まず最初に、初心者向け説明記事ということで、なるべく平たく細かく説明できれば良いな、と思います。「Lazyloadが何か知らない。読み方もわからない (∵`) 」を出発点にして自ら説明のハードルを上げるワタクシ((((笑)説明すべき点がたくさんありますので、かなりの長文になりますから記事も数回に分けようと思います。

おまけ

過去に投稿した記事を編集や修正または追記などをする時は、管理画面を開いて目的の記事を探すのが普通だと思います。

しかし目的の記事が古い場合には、何度もページを移動する必要があります。

また、管理画面内の表には投稿した日付はあっても記事番号はなく、記事タイトルも一部しか表示されないので、使いにくいと感じる方も少なくないのではないでしょうか。

そこで私は全記事一覧のリスト内にこんな隠し機能を付加しています。

上の画像の中で四角く囲んであるのは隠しボタンで、これをクリックすると別タブで記事の編集画面が開くように設定しています。

この方法なら1000件まで同じページで表示されるのに加えて、記事番号も日付も見ながら目的の記事を見つけることが出来ます。

そして、この編集ボタンはCSSで見えないようになっています。

もしかしたらこの隠しボタンのカスタマイズの方が、本題の全記事一覧に画像を表示するよりも実用的で参考になるかも知れません (苦笑)

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

以前投稿した、FC2ブログカスタマイズに関する記事に補足する内容と注意点です。...

3 件のコメント

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

-

2019/09/30 (Mon) 09:00

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

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

ススム

2019/09/30 (Mon) 10:34
ススム

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

おはようございます。
アイコンの件は知ってましたが、いろいろ試したいことがあって実行した内容が反映されるのを待っています (笑)

このカスタマイズはFC2ブログが推奨と言うか想定していないはずですから、仕様変更されれば配慮されることはないと思います
(苦笑)

-

2019/09/30 (Mon) 11:09

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

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