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」を加えた形。例://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
  • プレイしたゲーム、使用したソフト(アプリ)、通販アイテムの感想など、色々と書いている雑記ブログです。

カテゴリ
最新記事
【艦これ】戦果+350!クォータリー任務〈戦果拡張任務!「Z作戦」前段作戦〉を攻略! 2017/04/28
【フリーソフト】簡単ライティング/リッピングソフト「ISO Workshop」でCDメディアのバックアップを作成! 2017/04/25
【艦これ】10スロ瑞雲・晴嵐で5-1マンスリー任務〈「水上打撃部隊」南方へ!〉を攻略! 2017/04/22
【艦これEO】4-5「港湾棲姫」に昼戦有効打!三式弾&増設バルジ装備で攻略! 2017/04/19
【艦これ】[重巡3+軽空3]編成で2-5マンスリー任務〈「第五戦隊」出撃せよ!〉を攻略! 2017/04/15
【艦これ】鈴谷航改二の6-2&6-5単発任務「改装攻撃型軽空母、前線展開せよ!」を攻略! 2017/04/11
【艦これ】「鈴谷改二」の5-1&5-3単発任務「改装航空巡洋艦、出撃!」で「強風改」ゲット! 2017/04/09
【艦これ】伊良湖&特注家具職人をゲット!単発ボーナス任務「鎮守府海域警戒を厳とせよ!」 2017/04/07
スポンサーリンク
艦これEO&定期任務

Extra Operation


ウィークリー任務


マンスリー/クォータリー任務

ブログ村参加中です!

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



艦これスタイル 肆 (カドカワムック)
艦これスタイル 肆 (カドカワムック)
艦隊これくしょん -艦これ- おねがい!鎮守府目安箱1 (電撃コミックスNEXT)
艦隊これくしょん -艦これ- おねがい!鎮守府目安箱1 (電撃コミックスNEXT)
艦隊これくしょん -艦これ- 4コマコミック 吹雪、がんばります!(9) (ファミ通クリアコミックス)
艦隊これくしょん -艦これ- 4コマコミック 吹雪、がんばります!(9) (ファミ通クリアコミックス)
艦隊これくしょん -艦これ- アンソロジーコミック 横須賀鎮守府編(16) (ファミ通クリアコミックス)
艦隊これくしょん -艦これ- アンソロジーコミック 横須賀鎮守府編(16) (ファミ通クリアコミックス)
艦隊これくしょん -艦これ- 電撃コミックアンソロジー 佐世保鎮守府編13 (電撃コミックスNEXT)
艦隊これくしょん -艦これ- 電撃コミックアンソロジー 佐世保鎮守府編13 (電撃コミックスNEXT)
艦隊これくしょん -艦これ- コミックアラカルト 舞鶴鎮守府編 十四 (角川コミックス・エース)
艦隊これくしょん -艦これ- コミックアラカルト 舞鶴鎮守府編 十四 (角川コミックス・エース)
艦これプレイ漫画 艦々日和(7)
艦これプレイ漫画 艦々日和(7)
艦隊これくしょん -艦これ- ケッコンカッコカリアンソロジー 三 (電撃コミックスNEXT)
艦隊これくしょん -艦これ- ケッコンカッコカリアンソロジー 三 (電撃コミックスNEXT)
最新コメント