ブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグイン
ブログの最新記事一覧を画像付きでサイドバーに表示するJavaScriptのプラグインです。
ファンブログはひとり５個までブログを作れますが、自分の別ブログや友達のブログの最新記事一覧も表示できます。具体的な表示例は下のサンプルをご覧ください。
ファンブログとSeesaaブログ以外でもサイドバーに貼り付ければ動きます。
忍者ツールズに「忍者画像RSS」というのがあるんですが、ファンブログの画像は読み込んでくれないみたいなので変わりに使いたいという方はどうぞ。
Internet Explorerで動いていなかったので直しました。2015年12月6日11:40
サンプル
右サイドバーのテンプレートに設置した場合
ご覧のように画像メインの表示になりますが、「違う！これじゃない！」という方は別のレイアウトを次のページに用意しています。そちらもご覧ください。
ブログのRSSというものを読み込んで最新記事を表示させます。パーツを設置した、そのブログ自身のRSSを指定すればパーツを表示しているそのブログ自身の「最新記事」を表示します。
他のブログのRSSを指定すれば、そのブログの最新記事一覧を表示します。
ただ、将来的に違うドメインのブログの表示はしなくなる可能性があります。対応をやめても同じドメインのブログ記事は表示し続けますが、違うドメインのブログを指定しても何も表示しなくなります。お使いになる際はその点をご了承下さい。
クロスドメイン制約というのがあって、スクリプトを置いたドメイン以外ではRSSを読み込めないのが理由です。今は違うドメインの時は私の個人サーバーを経由して表示させていますが将来も対応する保証はできません。
使い方
サイドバーの自由形式に次のソースを丸ごと貼り付ければ、今ご覧のこのブログ「ファンブログ テック」の最新記事５個が「サイドバーに表示されるタイトル」という題名で表示されます。
赤文字の部分を変えれば表示が変わります。
<div class="fanblog_tech_plugin_39"></div>
<script>
var fanblog_tech_plugin_39_values = {
"title" : "サイドバーに表示されるタイトル" ,
"rss_uri" : "https://fanblogs.jp/techs/index1_0.rdf" ,
"count_max" : 5 ,
"blank_flag" : false ,
"image_flag" : true ,
"elem_number" : document.querySelectorAll(".fanblog_tech_plugin_39").length - 1
};
</script>
<script src="https://fanblogs.jp/techs/file/plugin_39.js" charset="UTF-8"></script>
ファンブログとSeesaaブログでのサイドバーへの設置方法は「プラグインの設置方法」をご覧ください。
パーツタイトルの設定
"title" と書かれた行の 「サイドバーに表示されるタイトル」を書き変えればファンブログとSeesaaブログでは、それがサイドバーのパーツのタイトルで表示されます。上のサンプルではここを「別のブログの最新記事」と「更に別のブログ」というタイトルにして２個作っています。
書き変える時はタイトルを挟んでいる " を削除しないでください。削除すると動きません。
ファンブログと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 となっていますが、記事が１個しかないのに10と書き込んでも表示されるのは１個です。
表示個数を1個にしてパーツを複数つければ、複数のブログのそれぞれの最新記事を表示することになります。
リンクをクリックした時に、別窓で開くかどうかの設定
他のブログを表示する時は別窓で開きたいこともあると思います。
"blank_flag" と書かれた行の false という5文字を、 true という半角アルファベット4文字にすれば別窓で開きます。半角でなく全角アルファベットで書くと動きません。
初期設定では false になっていますが、この場合は別窓ではなく同じ窓のページが移動します。
画像を表示させるか文字だけにするかの設定
このブログパーツでは、対応する記事の本文から最初に見つかった画像を表示します。ただし、絵文字など20ピクセル以下のものは除外します。
"image_flag" と書かれた行の true という文字を false という半角アルファベット5文字にすれば、画像の表示をやめます。半角でなく、全角アルファベットで書くと動きません。
画像のない記事は画像を表示できないので、「たまにしか画像がないブログのリンクでは画像のある記事だけが目立ってしまう。それがイヤだ」というような場合、またサイズが指定できないので「画像がデカすぎ。それがイヤだ」という場合に設定して下さい。
ただ、ファンブログやSeesaaブログで画像を表示しないなら、元々ある純正ブログパーツで他のブログの記事一覧表示はできます。詳しくは以前書いたページ「別のブログの最新記事一覧をサイドバーに表示する」をご覧ください。
以上です。それ以外の部分を書き変えると動かなくなります。
ファンブログとSeesaaブログでのサイドバーへの設置方法は「プラグインの設置方法」をご覧ください。
