【FC2ブログ】サイドバー最新記事にサムネイル画像を表示させる方法
FC2のサイドバーに表示される最新記事プラグインのことですが、デフォルトではタイトル文字だけが表示されています。ここにサムネイル画像を表示させたかったので実装してみました。
プラグインに関しては2通りの方法を試しました。ただ、1つは最新画像を投稿する度に画像名を変える必要があり面倒でした。
そして、しばらく使っていると何故か最新記事のサムネイル画像が×印のまま表示されなくなりました。調べてみると原因は画像サーバーのナンバーが変わったことにより、画像参照できなくなっていたようです。
他のFC2ブログをいくつか覗いてみると、結構な確率で×印になっていたので原因を調べました。
私の場合、画像URLの数字が96から100に変わっていました。
https://blog-imgs-96.fc2.com/
https://blog-imgs-100.fc2.com/
「めんどくさっ」と思いながらも、×印のままなのは嫌なのでもう1つの方法を試して導入してみました。
参考にさせて頂いたブログはこちら。
この方法であればサーバーナンバーが変わってもいけそうな気がします。最初からこの方法で導入しておけばよかった。
対処の手順
管理画面左サイドバーのプラグインの設定から公式プラグイン追加をクリック。
最新記事を追加した後、詳細をクリック。
HTMLの編集をクリック。
フリーエリアに下記ソースをコピペ。5行目は自身のブログURLに書き換える。設定をクリックして完了。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="”fanblog_tech_plugin_40″"></div> <script> var fanblog_tech_plugin_40_values = { “title” : “新着記事” , “rss_uri” : “https://sampleblog.fc2.com/?xml” , “count_max” : 5 , “image_width” : 60 , “default_image” : “記事に画像がないときの代替画像URL” , “blank_flag” : false , “elem_number” : document.querySelectorAll(“.fanblog_tech_plugin_40″).length – 1 }; </script> <script src=”https://fanblogs.jp/techs/file/plugin_40.js” charset=”UTF-8″></script> |
ソースコードの6行目と7行目の数字は表示させる記事数とサムネイル画像の幅。お好みで変更可能。記事に画像がない時の代替画像URLの部分も、用意した画像URLを書いておくと、サムネイル画像が表示されないのを防げます。
あとがき
たったこれだけで、簡単に導入できました。なによりサーバーナンバーが変わったときにも対応できるのがいい。
もう1つの方法だと画像をアップロードする際に、記事ナンバーを調べてファイルネームを変更する必要があったので、その手間が省けただけでも有り難いです。
正直ちょっとした記事にサムネイル画像を作成したり、探してくるのは億劫だったんですよね。記事を書くときに、サムネイル画像を載せるまでもないなって時に、もう1つの方法でそのまま投稿すると×印が表示されます。それを代替画像でカバーできるのは便利です。
それとFC2って頻繁にサーバーナンバーが変わるのでしょうかね？だとしたら早めに対処した方がいいかも知れませんね。