FC2ブログ 最新記事一覧を画像付きにする簡単な方法があった
FC2ブログのサイドバーにある、最新記事のプラグインを画像付きにする方法です。
最近はFC2ブログで記事下に表示される関連記事が画像付きになりました。
そのうちに、
これまで私は 記事番号と画像番号を揃える、という方法でやっていましたが、いつしかその方法がダメになり、
（何故ダメになるのかというと、画像ファイルがいっぱいになると ファイル番号が勝手に変わってしまうとか？よくわかりませんが）
他に良い方法はないかと調べていたら、難しいのと簡単なのがありましたので、簡単なほうをご紹介します。
見つけました方法はこちらです。ファンブログテックさんの「ブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグインⅡ 横並びバージョン」という記事です。（残念なことにファンブログテックさんの記事が現在読めなくなってしまっています）
なんと、これはファンブログのプラグインでありながら他のブログにも使用可能というすぐれもの。素晴らしい！
私もしばらく使ってみましたが、なんの不具合もなく面倒なこともありませんでした。
FC2ブログのプラグイン 「フリーエリア」を追加して、コードをコピペするだけ
まずは、FC2ブログ管理画面で、プラグインの設定→公式プラグイン追加→フリーアリア追加→フリーエリアの内容の中にコードを追加する、これだけです。
コードは以下です。赤字と青字を自分のURLに変更するだけです。
赤い字のところに、自分のFC2ブログのＵＲＬを入れてください。
青い字の「記事に画像がないときの代替画像URL」はFC２ブログにアップロードしてからの画像のＵＲＬです。
「"」などの小さな記号を消さないようにしてください。
「"count_max" : 5 」の5は新着記事の個数で、
「"image_width" : 80」の80は画像のサイズで、元の画像の比率に合わせて表示されるそうなので、
同じサイズに揃えたい場合は、元画像の大きさを揃えたほうがいいと思いますが、ちょっとくらいの大きさの違いは気になりません。
（注・こちらはFC2ブログ用のコードです。 rss_urlが各ブログで違います。）
<div class="fanblog_tech_plugin_40"></div>
<script>
var fanblog_tech_plugin_40_values = {
"title" : "新着記事" ,
"rss_uri" : "http://rougonokurashi.blog.fc2.com/?xml" ,
"count_max" : 5 ,
"image_width" : 80 ,
"default_image" : "記事に画像がないときの代替画像URL" ,
"blank_flag" : false ,
"elem_number" : document.querySelectorAll(".fanblog_tech_plugin_40").length - 1
};
</script>
<script src="http://fanblogs.jp/techs/file/plugin_40.js" charset="UTF-8"></script>
（このHTMLコードの赤字青字を変えればこのまま使えます）
それでは やってみます。
サイドバーの最新記事に画像を付ける簡単な方法
FC2ブログ管理画面の「プラグインの設定」をクリックします。
「公式プラグイン追加」をクリック
少し下のほうに下がって「フリーエリア」の「追加」をクリック
「フリーエリア」を追加すると編集画面になります。
・「フリーエリア」のタイトルに「新着記事」と入れます。「最新記事」でもいいんですが、もともと最初から「最新記事」があるので、それと区別するためにタイトルを多少変えます。最初からあるものは「表示する」のチェックをはずして、そのままとっておきます。（戻したい時にいつでも戻せるように）
・「フリーエリア内容の変更」にさきほどのファンブログのプラグインであるHTMLコードを入れます。
コードを入れたら「プレビュー」を押して確認し、大丈夫なら「追加」をクリックします。
プレビューで確認すると、新着記事がサイドバーのいちばん上に表示されます。
「追加」をクリックした後、「プラグインの設定」に戻り、表示する順番を変更します。
このブログでは、上から3番目にしています。
「表示する」のボックスにチェックを入れて、数字を入れて「移動」を押すと、順番が変更されます。
以上で終了です。
タイトルは「新着記事」でも「最新記事」でもなんでもわかればいいんですが、もともとの「最新記事」と区別できるようにしたほうがいいです。例えば「*最新記事」のように*マークをつけるとか。（区別しなくても慣れればわかりますが）
もしも万が一、この方法が使えなくなった時には、もともとの「最新記事」の「表示する」のチェックを入れれば元に戻ります。
（画像付きだった「新着記事」の「表示する」のチェックを外すのもお忘れなく）
新着記事に画像があるのと無いのとでは ブログの雰囲気が変わりますね。いい感じになります。
ファンブログテックさん、素晴らしい情報をありがとうございました。
ーーーここからは拍手コメント様への返信ですーーー
非公開コメントのあ○○様、拍手コメントを残してくださってありがとうございました。
私もお役に立てて嬉しいです。（ファンブログテックさんにも感謝します。）
これからもよろしくお願いします。
スポンサーリンク
スポンサーリンク
