あらかじめ日記

雑記とかブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。

【FC2ブログ】最新記事一覧にサムネイル画像を表示する方法

2018/2/16 追記
FC2ブログで公式に最新記事一覧のサムネイル画像が対応されたので、下記は無用なものとなりました。詳細はこちらをご覧ください。

allthewayfrom.hatenablog.com

FC2ブログの最新記事の一覧でサムネイル画像を表示方法についてまとめてみました。
はてなブログから失礼します。。)

 まず、FC2ブログでよく紹介されているテクニックとしては最新記事の一覧を表示させる箇所で、テンプレート上のimgタグのsrcを

[ブログのファイル用パス]/[任意の名前]<%recent_no>.[拡張子]

としておく方法ですね。

例えば当FC2のブログですと
http://blog-imgs-73.fc2.com/a/l/l/allthewayfrom/entry_img_<%recent_no>.jpg
(「entry_img_」は好きな名前で構いません)

※サムネイル用の画像を表示する場合は<%recent_no>sとします。
ただし、アップロード時に常にサムネイル作成をオンにして<%recent_no>sのファイルが存在している状態にしておく必要があります。

記事の保存時にサムネイル表示したい画像を、上記の名前(<%recent_no>の部分を記事Noと合わせる)でアップロードしておけば、テンプレート保存時に<%recent_no>の部分が自動的に記事Noに変換されて画像が表示される、と言う仕組み。

実にシンプルですが、なるほど、と言う感じですね。


これだけならわざわざ記事にする必要も無いのですが、実は、これ落とし穴があります。


この方法で、表示を行っていたところ、ある日突然サムネイル画像が表示されなくなりました。

「なんでだー」と調べてみると、なんとブログのファイル用パスが変わっている!
(最初に書いたパスで言う「blog-imgs-73」の部分の数字が変わってました。。)

(多分、記事用とアップロードファイル用のサーバーが別管理でファイル用の方は容量の関係で、随時別サーバーに変わるのかなぁ、、と想像)

最新記事の画像が全て新サーバーへ移っているのであれば、パスを修正するだけで良いのですが、切り替わった直後は新旧のパスが混ざるので、上記の方法でサムネイル画像表示を行っている人には困る問題です。


色々と調べてみると、「JavaScriptを利用して現在対象としているサーバー名を探す」と言う方法でやられている方もいました。ただ、結構コード量が多くそこまではしたくない・・・

そこで、

そんなに頻繁にサーバー名は変わらないはず、なら、こっちがダメならこっちを試す、くらいでいけるはず。

と言うことで、JavaScriptのonErrorイベントを利用してエラーが発生したら(=ファイルが見つからなければ)画像を非表示にする方法で対応してみました。

ソースコード

<img src="[ブログのファイル用パス1]/[任意の名前]<%recent_no>.[拡張子]" onError="this.style.display='none';" style="display:block;" />
<img src="[ブログのファイル用パス2]/[任意の名前]<%recent_no>.[拡張子]" onError="this.style.display='none';" style="display:block;" />

[ブログのファイル用パス1][ブログのファイル用パス2]にそれぞれURLが切り替わる前と後となるパスを記入します。

元々は、対象の画像ファイル存在しない時に、×マークを出さないように、エラー発生時に表示属性を非表示にする対応ですが、これを利用して、候補になる画像を2つ並べ、一方は存在しないことを前提に、どちらかが非表示になってどちらかが表示されるはず、と言うなかなかワイルドに処理してみました。
(両方とも無い時は良いですが、両方共にある場合は当然2つ表示されます^^;)


もう少しちゃんと書くとすると以下になるでしょうか。


ソースコード

(関数定義用)
<script type="text/javascript">
<!--
function repImg(imgSrc,tgtEle) {
 var img = new Image();
 img.src = imgSrc;
 img.onload = function() {
  tgtEle.src = imgSrc;
 }
 img.onerror = function() {
  tgtEle.style.display='none';
 } 
}
// -->
</script>

(関数呼び出し用)
<img src="[ブログのファイル用パス1]/[任意の名前]<%recent_no>.[拡張子]" onError="repImg('[ブログのファイル用パス2]/[任意の名前]<%recent_no>.[拡張子]',this)">

※本プログラムによって発生した問題に関して一切責任を負えませんので、あくまで使用は自己責任でお願いします。

(関数定義用)をヘッダ内に記述しておいてください。

対象画像のエラー発生時に、代替の画像をチェックした上で、差し替えています。
(代替画像も無ければ非表示)

これなら、最終的に画像が無かったら、画像無し用の固定画像に置き換えると言うことも可能ですね。

※代替画像のチェックをせずに、置き換える方法でもできますが代替画像もなかった場合に、エラーのイベントがループしてしまうので、チェックした方が良いかと思います。


ちなみに、記事のサムネイル画像を表示させる変数<%topentry_image>、<%topentry_image_72>、<%topentry_image_w300>(それぞれの数字は画像サイズ)があり、これが使えるかも!と思ったのですが、変数名の通り<!--topentry-->エントリー内のみで、最新記事のエントリー内には使えません。 (最新記事用にも使えるような変数があれば楽だったのに。。)


さて、そこまでする必要がないと言っておきながら、もう少し最新記事一覧についてカスタマイズできないかと欲が出てきました。


画像付きRSSを表示するブログパーツのサービスを利用するのが早いかもしれませんが、jQueryを利用して自前で行う方法を、次回まとめて見たいと思います。
(本ブログサイドバーの、FC2ブログ側の最新記事がその方法で表示させています)