wordpressとか、ライブドアブログでよくある、
最新記事などを画像付きで表示させるブログパーツを
seesaaブログやfc2ブログでも似たように表示させようかと思って、
いろいろやってみた。
うん。自分用メモ。
まずは、 既存のブログパーツは画像を表示することができなので、
Google Feed APIを使って表示します。
デフォルトのコードや説明は下記となります。
今回はindigonoteさんのコードを利用します。
本当に助かりました。
こちらのコードは、複数フィードを別々の場所に配置ができるので便利です。
あれです。最新記事とamazonアソシエイトのRSSを配信したりとか便利なんです。
amazonアソシエイトのrss使って自動で表示させるのは、あとで書きます。
むしろ、このGoogle Feed APIの配置させできてしまえば簡単なので。
今回のコード
・indigonoteさんのコードだと、画像付きじゃないので、画像付きにソースコードを書き換え。
・amazonアソシエイトの画像やseesaaの画像など、
画像のURLが「.jpg」で終わらない場合でも読み込み可能に書き換え。
・gif、png画像も読み込めるように書き換え。
・画像がない記事の場合は、別画像を配置するように書き換え。
自分用メモなので動かなくても泣かないと約束できる方はご利用くださいw
配置をしたい場所に下記のコードを追加。
ついでに、他の場所に新しいrssを配置したいのだったら、</script>の上に下記を追加。
配置したい場所に下記のコードを追加。
というか、見て分かる通り、feed2、feed3と増やせます。
ついでに、cssも置いておきます。
上記で、どうしてもできない。
という方には、複眼RSSをお勧めいたします。
ただ、時々、広告の画像が挿入されるので、
それが嫌な方はGoogle Feed APIがおすすめですよ。
最新記事などを画像付きで表示させるブログパーツを
seesaaブログやfc2ブログでも似たように表示させようかと思って、
いろいろやってみた。
うん。自分用メモ。
まずは、 既存のブログパーツは画像を表示することができなので、
Google Feed APIを使って表示します。
デフォルトのコードや説明は下記となります。
今回はindigonoteさんのコードを利用します。
本当に助かりました。
こちらのコードは、複数フィードを別々の場所に配置ができるので便利です。
あれです。最新記事とamazonアソシエイトのRSSを配信したりとか便利なんです。
amazonアソシエイトのrss使って自動で表示させるのは、あとで書きます。
むしろ、このGoogle Feed APIの配置させできてしまえば簡単なので。
今回のコード
・indigonoteさんのコードだと、画像付きじゃないので、画像付きにソースコードを書き換え。
・amazonアソシエイトの画像やseesaaの画像など、
画像のURLが「.jpg」で終わらない場合でも読み込み可能に書き換え。
・gif、png画像も読み込めるように書き換え。
・画像がない記事の場合は、別画像を配置するように書き換え。
自分用メモなので動かなくても泣かないと約束できる方はご利用くださいw
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); var getRssFeed = function (_id, _urls, _length) { if(!_id || !_urls || (!(_urls instanceof Array))) return; //変数 var entriesArray = new Array(); var complete = 0; //読み込み var init = function () { for (var e = 0; e < _urls.length; e++) getFeed(_urls[e], e)}; function getFeed(_url, _num) { var feed = new google.feeds.Feed(_url); if(_length) feed.setNumEntries(_length); feed.load(function(result) { if (!result.error) { html = '<dl class="feedbox">'; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var gazo = "" var gazo = entry.content.match(/(src="http:){1}[\S_-]+\"/); //画像がなかった場合に読み込む画像 var photo = ("<img src='ここに画像がない場合の画像のURLを書き込む' />"); if(gazo != null){ html += '<dt class="feedboxtext"><a href="' + entry.link + '">' + entry.title + '</a></dt>'; html += '<dd class="feedboximg"><a href="' + entry.link + '"><img ' + gazo[0] + ' /></a></dd>'; }else{ html += '<dt class="feedboxtext"><a href="' + entry.link + '">' + entry.title + '</a></dt>'; html += '<dd class="feedboximg"><a href="' + entry.link + '">' + photo + '</a></dd>'; } } html += '</dl>'; entriesArray[_num] = html; complete++; if(complete == _urls.length){ echo(); } } }); }; //出力 var echo = function () { var container = document.getElementById(_id); for (var e = 0; e < _urls.length; e++) container.innerHTML += entriesArray[e]; }; google.setOnLoadCallback(init); }; var feed1 = new getRssFeed("feed1", ['ここにRSSのURLを設置。→は表示件数'], 10); </script>
配置をしたい場所に下記のコードを追加。
<div id="feed1"></div>
ついでに、他の場所に新しいrssを配置したいのだったら、</script>の上に下記を追加。
var feed2 = new getRssFeed("feed2", ['ここに新しいRSSのURLを設置。→は表示件数'], 10);
配置したい場所に下記のコードを追加。
<div id="feed2"></div>
というか、見て分かる通り、feed2、feed3と増やせます。
ついでに、cssも置いておきます。
.feedbox{ width:170px; } .feedboxtext { width: 160px; color: #fff; background: rgba(0, 0, 0, 0.5); font-size:0.7em; border-top-left-radius: 6px; border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; padding:5px; line-height:1.2; -webkit-box-shadow: 0px 0px 3px #ccc; -moz-box-shadow: 0px 0px 3px #ccc; box-shadow: 0px 0px 3px #ccc; border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; } .feedboxtext a{ color: #fff; } .feedboximg{ margin:0 0 10px 0; display: inline-block; position: relative; } .feedboximg a{ width:170px; max-height:140px; overflow:hidden; display: block; color: #fff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-box-shadow: 0px 0px 3px #ccc; -moz-box-shadow: 0px 0px 3px #ccc; box-shadow: 0px 0px 3px #ccc; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; } .feedboximg a img{ width:170px; }
上記で、どうしてもできない。
という方には、複眼RSSをお勧めいたします。
ただ、時々、広告の画像が挿入されるので、
それが嫌な方はGoogle Feed APIがおすすめですよ。
コメント
コメント一覧 (2)
ブログをやっていて、こちらの記事を参考に新着記事のカスタマイズをさせていただきました。テキストだけのときよりも見栄えもよくなって、たいへん満足しています。
ありがとうございましたm(_ _)m
FC2で、こちらで紹介されている方法を使わさせて頂きました。
ありがとうございました。