1. Top
  2. » 雑記
  3. » fc2ブログのプラグインに画像付きの最新記事リストを表示する

fc2ブログのプラグインに画像付きの最新記事リストを表示する

fc2ブログの公式プラグインでは最新記事リストを画像付きで表示できなかったので、ググって見つけたページを参考にして画像付きで表示できるようにしていたのが、最近になって日付を加える事にも成功したので備忘録を書く。ついでに、画像が無い場合に代わりに読み込む画像の表示テスト。


※2016年11月11日に公式プラグインが追加されてサムネイル画像付きの最新記事一覧を表示できるようになりました。

※関連記事:FC2ブログに「画像付き最新記事一覧」の公式プラグイン(PC用)が追加! (2016-11/12)



seesaaブログやfc2ブログなどに最新記事を画像付きで表示する。 : NumberLife
JavaScript - Google Feed APIを使って外部ブログのRSSを表示する方法 - Qiita

Googleが提供しているGoogle Feed API ? Google Developersを使ってブログのRSSフィードを読み込んで、記事の画像・タイトル・日付等を取得し、それをJavaScriptで表示するということらしい。この認識で大体合ってるのかな?

参考にした2つのページのサンプルコードをお借りしてfc2ブログのテンプレート・CSS・プラグインに貼り付けていく。

その1.テンプレートの</head>の直前あたりに貼り付けた
<!-- ▼画像付き最新記事▼ -->

<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 pdate = new Date(entry.publishedDate); //Dateクラス
var pyear = pdate.getFullYear(); //年
var pmonth = pdate.getMonth() + 1; //月
var pday = pdate.getDate(); //日

//日付を2桁表示に変更
if (pyear < 2000) pyear += 1900;
if (pmonth < 10) {pmonth = "0" + pmonth;}
if (pday < 10) {pday = "0" + pday;}

var date = pyear + "." + pmonth + "." + pday + " ";


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 + ' | ' + date + '</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 + ' | ' + date + '</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'], 表示するRSSの数);
</script>

<!-- ▲画像付き最新記事▲ -->

画像がない場合に代わりに読み込む画像のURL
NO IMAGEの素材 3 | EC design(デザイン)」でお借りした画像を使わせてもらった。ファイルをアップロードして画像のurlを該当箇所に入力。

RSSのURL
fc2ブログの場合、ブログ全体のRSSはURLの後ろに「?xml」を加えた形。例:http://tonahazana.com/?xml各カテゴリ別のRSSのURLは「?xml&category=0」のようにカテゴリ番号を付け加えた感じ。ブログ管理ページの「設定」→「カテゴリの編集」にあるRSSアイコンのURLからコピペすると簡単。

表示するRSSの数
表示したい数を入力。自分はとりあえず「8」にしている。ブログ管理ページの「設定」→「環境設定」→「ブログの設定」→「記事の設定」にある「RSSの設定」の件数を表示したい数以上にする必要があるみたい。例えばブログ側のRSSの表示設定が5件なら、コードの内の「表示するRSSの数」を「10」に設定しても5つしか表示されなかった。


その2.配置したい場所に追加(公式プラグインのフリーエリアに貼り付けた)<div id="feed1"></div>

※複数のRSSを表示したい場合
一番上のコードの</script>の直前に以下の様なコードを追加することで複数のRSSを表示することもできるらしい。feed1、feed2、feed3...、のように番号、というか変数名を変えれば、いくつも追加できるみたい。fc2ブログだとカテゴリ別に表示するのもありかも。別サイトのRSSも取得できるっぽいなあ。

タイトルvar feed2 = new getRssFeed("feed2", ['ここに別のRSSのURL'], 表示するRSSの数);
その2と同じような手順で配置したい場所に以下のコードを追加<div id="feed2"></div>

その3.CSS(テンプレートの設定のスタイルシートに貼り付け)
/* 画像付き最新記事 */

.feedbox{
width:280px; /* 横幅 余白があるのでプラグインの枠より少し小さめに */
}

.feedboxtext {
width: 280px; /* 横幅 余白があるのでプラグインの枠より少し小さめに */
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:280px; /* 画像横幅 余白があるのでプラグインの枠より少し小さめに */
max-height:210px; /* 画像の高さの最大値 */
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;
margin: 0 0 10px 0; /* 上 右 下 左 枠外の間隔 画像下を少し空けた */
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:280px; /* 画像横幅 余白があるのでプラグインの枠より少し小さめに */
}

CSSは画像やテキストの幅を自分のブログのプラグイン幅に合わせて少し弄った。

これで画像付きの最新記事リストをプラグインに表示することができた。サンプルコードを載せてくれてるページの方々に感謝!ブログ弄くるの面白いなあ。

ちなみに、この方法で画像付き最新記事リストを表示する場合、新記事を投稿してから反映されるまでにタイムラグがあるようだった。正確に測ったわけではないので曖昧だけど1~2時間程度?Google Feed API が情報を取得するのに多少の時間が必要になっているのかもなあ。

表示される画像は記事の「本文」の部分に載せた画像で、別に生成されたサムネイルとかじゃなく、元々の画像がCSSで設定した範囲内でサイズ変更されて表示されているみたい。

画像の容量が大きいとページの読み込みとかに時間が掛かり過ぎて重くなったりしそうだから注意しないと!今思えば、少し前にPageSpeed Insightsで修正を提案された原因には、これも絡んでそうだなあ。



関連コンテンツ


同じカテゴリの記事

コメントの投稿

No.43 / - [#] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015 06/21 (Sun) 17:52

No.44 / donpappa [#-] Re: No43コメントさん

上手くいって良かったですね( ´∀`)bグッ!
サンプルコードを継ぎ接ぎした備忘録的な記事ですが、少しでも役立ったなら嬉しい限りです。

2015 06/22 (Mon) 22:45

Comment Form
コメントの投稿
HTMLタグは使用できません
ID生成と書き込んだコメントの再編集に使用します
管理者にだけ表示を許可する

  • コメントありがとうございます!
  • 迷惑コメント対策のため画像認証&承認後表示となっています。詳しくは「免責事項、コメントの承認基準」をご確認ください。
  • マナーを守った感想・意見・情報など大歓迎です!お気軽にどうぞ!

Page Top

Trackback

Trackback URL

http://tonahazana.com/tb.php/77-6735be2e

この記事にトラックバックする(FC2ブログユーザー)

Page Top

ようこそ!
RSSアイコン twitterアイコン YouTubeアイコン
  • Author:donpappa
  • プレイしたゲーム、使用したソフト(アプリ)、通販アイテムの感想など、色々と書いている雑記ブログです。

カテゴリ
最新記事
【艦これ】2016年12月9日アップデート 艦娘クリスマスmode/噴式強襲航空攻撃/家具更新ほか 2016/12/10
【艦これ】2016秋イベント【発令!「艦隊作戦第三法」】を終えての感想 2016/12/09
「Zenfone2/Laser/3/Selfie/Go/Max」用のソフトケース(カバー)使用感想 2016/12/07
【艦これ】16秋イベ追加の新艦娘/装備/仕様を確認!【連合艦隊vs連合艦隊etc】 2016/12/04
【艦これ2016秋イベント】E-1甲掘り「秋月&初月ドロップ作戦」 対潜特化編成・装備でボスマス周回! 2016/11/30
【艦これ2016秋イベント】E-5甲ボスマス掘りで「朝風、親潮、プリンツ、ポーラ」ドロップ狙い! 2016/11/28
【艦これ2016秋イベント】E-5甲「渚を越えて」 装甲ギミック&特効艦編成で攻略! 2016/11/26
【艦これ2016秋イベント】E-5甲 スタート地点の変更/移動ギミックを攻略! 2016/11/25
艦これ系リンク
スポンサーリンク
ブログ村参加中です!

fc2ブログランキング 人気ブログランキング
にほんブログ村 ゲームブログ 艦隊これくしょんへ にほんブログ村 その他日記ブログ 備忘録・メモへ
今月のページランキング
スポンサーリンク










最新コメント