FC2ブログ 最新記事一覧を画像付きにする簡単な方法があった

FC2ブログのサイドバーにある、最新記事のプラグインを画像付きにする方法です。



最近はFC2ブログで記事下に表示される関連記事が画像付きになりました。

【ブログ】関連記事リストにアイキャッチ画像が表示できるようになりました!

そのうちに、最新記事のほうも画像付きになるかもしれませんが、今のところはまだです。(現在は画像つきプラグインが追加されています

これまで私は 記事番号と画像番号を揃える、という方法でやっていましたが、いつしかその方法がダメになり、

(何故ダメになるのかというと、画像ファイルがいっぱいになると ファイル番号が勝手に変わってしまうとか?よくわかりませんが)

他に良い方法はないかと調べていたら、難しいのと簡単なのがありましたので、簡単なほうをご紹介します。

shintyaku.jpg

見つけました方法はこちらです。ファンブログテックさんの記事をリンクさせていただきました。
ブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグインⅡ 横並びバージョン

なんと、これはファンブログのプラグインでありながら他のブログにも使用可能というすぐれもの。素晴らしい!

私もしばらく使ってみましたが、なんの不具合もなく面倒なこともありませんでした。

FC2ブログのプラグイン 「フリーエリア」を追加して、コードをコピペするだけ


まずは、FC2ブログ管理画面で、プラグインの設定→公式プラグイン追加→フリーアリア追加→フリーエリアの内容の中にコードを追加する、これだけです。

コードは以下です。細かい注意事項はファンブログテックさんを参考にしていただければ、と思います。赤字と青字を自分のURLに変更するだけです。

赤い字のところに、自分のFC2ブログのURLを入れてください。
青い字の「記事に画像がないときの代替画像URL」はFC2ブログにアップロードしてからの画像のURLです。
gazou.jpg

「"」などの小さな記号を消さないようにしてください。

「"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ブログ管理画面の「プラグインの設定」をクリックします。


shintyaku1.jpg


「公式プラグイン追加」をクリック

shintyaku2.jpg


少し下のほうに下がって「フリーエリア」の「追加」をクリック

shintyaku3.jpg


「フリーエリア」を追加すると編集画面になります。

shintyaku4.jpg


・「フリーエリア」のタイトルに「新着記事」と入れます。「最新記事」でもいいんですが、もともと最初から「最新記事」があるので、それと区別するためにタイトルを多少変えます。最初からあるものは「表示する」のチェックをはずして、そのままとっておきます。(戻したい時にいつでも戻せるように)
・「フリーエリア内容の変更」にさきほどのファンブログのプラグインであるHTMLコードを入れます。

shintyaku5.jpg


コードを入れたら「プレビュー」を押して確認し、大丈夫なら「追加」をクリックします。
プレビューで確認すると、新着記事がサイドバーのいちばん上に表示されます。

shintyaku6.jpg


「追加」をクリックした後、「プラグインの設定」に戻り、表示する順番を変更します。
このブログでは、上から3番目にしています。
「表示する」のボックスにチェックを入れて、数字を入れて「移動」を押すと、順番が変更されます。

shintyaku7.jpg


以上で終了です。

タイトルは「新着記事」でも「最新記事」でもなんでもわかればいいんですが、もともとの「最新記事」と区別できるようにしたほうがいいです。例えば「*最新記事」のように*マークをつけるとか。(区別しなくても慣れればわかりますが)

もしも万が一、この方法が使えなくなった時には、もともとの「最新記事」の「表示する」のチェックを入れれば元に戻ります。
(画像付きだった「新着記事」の「表示する」のチェックを外すのもお忘れなく)


新着記事に画像があるのと無いのとでは ブログの雰囲気が変わりますね。いい感じになります。



ファンブログテックさん、素晴らしい情報をありがとうございました。





非公開コメントのあ○○様、拍手コメントを残してくださってありがとうございました。
私もお役に立てて嬉しいです。(ファンブログテックさんにも感謝します。)
これからもよろしくお願いします。


スポンサーリンク
スポンサーリンク

関連記事











価格.comの賃貸物件"一括検索"サイト「スマイティ」


スマホの料金が今よりグッとオトクに!?【格安スマホはmineo】


【GRLグレイル】ひと目ボレ必至のトレンドITEM満載!

衝撃のサービス現る!【端末レスキュー】



◇最新記事◇