ブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグインⅡ 横並びバージョン
前回の「ブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグイン」と同じで、サイドバーに画像つきで最新記事を表示するブログパーツですが、レイアウトを変えたものです。ファンブログとSeesaaブログ以外でも動きます。
忍者ツールズに「忍者画像RSS」というのがあるんですが、ファンブログの画像は読み込んでくれないみたいなので変わりに使いたいという方はどうぞ。
ブログのRSSというものを読み込んで最新記事を表示するので、RSSを指定すれば他のブログの最新記事一覧も表示できます。
ただ、将来的に違うドメインのブログの表示はしなくなる可能性があります。対応をやめてもそのブログ自身の最新記事は表示し続けますが、違うドメインのブログを指定している場合は何も表示しなくなります。お使いになる際はその点をご了承下さい。
クロスドメイン制約というのがあって、スクリプトを置いたドメイン以外ではRSSを読み込めないのが理由です。今は違うドメインの時は私の個人サーバーを経由して表示させていますが将来も対応する保証はできません。
前回のは、画像を大きく目立たせて下にタイトルを置いた配置でしたが、今回は今うちのサイドバーで使っているように画像とタイトルが横に並ぶルックスになります。
ファンブログとSeesaaブログでは、テンプレートに合わせて表示が若干変わります。
使い方
次のソースをサイドバーの自由形式にそのまま貼り付けると、このブログ「ファンブログ テック」の最新記事が5個、「ブログパーツのタイトル」という題名で表示されます。自分のブログの最新記事を表示するには赤文字部分を書き変えます。
<div class="fanblog_tech_plugin_40"></div>
<script>
var fanblog_tech_plugin_40_values = {
"title" : "ブログパーツのタイトル" ,
"rss_uri" : "https://fanblogs.jp/techs/index1_0.rdf" ,
"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="https://fanblogs.jp/techs/file/plugin_40.js" charset="UTF-8"></script>
ファンブログとSeesaaブログでのサイドバーへの設置方法は「プラグインの設置方法」をご覧ください。
ブログパーツのタイトルを変更
"title"の行の赤い文字「ブログパーツのタイトル」というところを書き変えると、ファンブログとSeesaaブログではそれがパーツのタイトルとして表示されます。その他のブログでこのパーツを使う場合はここに何を書いても反映されません。貼り付けたブログパーツのタイトルを書き変えて代用してください。それから、反映されなくてもこの行は消さないでください。
書き変える時はタイトルを挟んでいる " を削除しないでください。削除すると動きません。
RSSのURLの設定
"rss_uri"と表示された行に表示させたいブログのRSSアドレスを書きこみます。"rss_uri" と、URLではなくURIと書いてますが意味は同じです。
このURLを書き間違えると、RSSを読み込めないので何も表示されません。
RSSのURLはブログのHTMLの<head>から</head>の間に書いてあるのですが、このブログ「ファンブログ テック」の場合だと下のようになっています。
このブログのRSSは「https://fanblogs.jp/techs/index1_0.rdf」です。ファンブログの場合は、赤文字のtechsという部分を、自分のブログのものに変えればOKです。
Seesaaブログなら、ブログのURLの最後に index.rdf をつけます。
http://xxxxx.seesaa.net/index.rdf
他のブログも見てみたところ大体次のようになっていました。
- WordPressの場合は、例外もありますがブログのURLの末尾にfeedとつけるとほぼ間違いないです。
ブログがhttp://dwm.me/ なら http://dwm.me/feed となります。 - ライブドアブログだと、ブログのURLの末尾にindex.rdf をつける形です。
ブログが http://blog.livedoor.jp/xxxxx/ なら http://blog.livedoor.jp/xxxxx/index.rdf - FC2ブログだと、ブログのURLに ?xml をつけるみたいです。
http://xxxxx.blog.fc2.com/ なら http://xxxxx.blog.fc2.com/?xml
書き変える時はタイトルを挟んでいる " を削除しないでください。削除すると動きません。
動かないときはURLを半角でなく、全角アルファベットで書いていないか確認してください。全角アルファベットだと動きません。
表示個数の設定
"count_max"と書かれた行の数字を書き変えると表示される個数が変わります。書き変える際は必ず半角数字で書いてください。全角数字では反映されません。またmaxとなっていますが、指定個数分の記事がなければあるだけしか表示できません。
画像サイズの変更
画像のサイズを変更するには、"image_width"と書かれた行の数字を半角数字で変更します。ここに書かれた数字が80なら80ピクセルの横幅で表示します。高さは元の画像の比率に合わせて表示されます。ピクセルといわれてもピンと来ないという場合はとりあえず80のままで表示してみるです。「これの半分くらいかな？」と思ったら40に変更して、もう一度見てみましょう。
数字は半角数字で記入してください。全角数字だと反映されません。
記事に画像がないときの代替画像URL
画像を使っていない記事に表示する代替画像のURLを書いてください。上の例だと画像のない記事では、このブログの公式アイコンを表示させています。
公式アイコン
代替画像がない時は必ず、 " と " の間の「記事に画像がないときの代替画像URL」という文字を消してください。"default_image"の行は " を2個続けて "" とします。
代替画像が指定されてなく、 " が2個続いている時は次の図の2番目のように表示されます。
別窓で表示するかどうかの設定
見ているブログの最新記事を表示しているなら多分必要ないとは思いますが、他のブログの最新記事を表示する場合はリンクを別窓で開きたいかも知れません。その場合は、"blank_flag"と書かれた行の false という5文字を、 true という4文字に半角で書き変えてください。全角で記入しても反映されません。変更せずに false のままなら、別窓でなく同じ窓でページが切り替わります。
以上です。その他の部分を変更すると動きません。
