FC2ブログで最新記事をサムネイル画像付きでサイドバーに表示する方法について覚書。
記事の最初の画像がそのまま使用されるので、あらかじめサムネイル画像を用意(アップロード)しておく必要もない。
GoogleのFeed APIを使用したスクリプトを使いますが、ほぼコピー&ペーストで良いのでそれほど難しくもありません。
サムネイル画像付き最新記事の表示について
最近のブログでは必ずと言っていいほど"最新記事"とか"新着記事"、"よく読まれている記事"をサムネイル画像付きでサイドバーに並べたり記事下のスペースに並べたりしている。
livedoorブログとかはそういったブログパーツが用意されているのでブログパーツを配置すればいいだけなのですが、FC2では残念ながらこの手のブログパーツはまだありません。
色々調べてみると方法としてあるのが、あらかじめ記事番号を使ったファイル名でサムネイル画像をアップしておいてブログ変数で指定するっていう方法なんだけど、いちいち専用のサムネイル画像をアップするのなんてめんどくさい。
で、もう少し調べたら記事の画像をそのままサムネイル画像として使って最新記事の紹介をサイドバーに並べられるスクリプトを教えてくれているサイトを発見したので参考にして自分のブログに設置した。
ほぼ自分の思い通りの結果になったので、その方法を以下に説明します。
参考にしたサイト
この記事で紹介しているスクリプトは、もともと以下のブログに掲載されていたスクリプトです。
GoogleのFeed APIを利用して記事中の画像をサムネイル画像として使用して最新記事をサイドバーに表示できるスクリプトです。
このスクリプトを少し自分用に変更して使っています。
スクリプトの変更点
まずは、参考にしたサイトに載っていた変更前のスクリプトを以下に記載します。
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます
function initialize(){
var feed = new google.feeds.Feed("RSSのURL"); //読み込むRSSフィードを設定します
var noPhoto = ("<img src='画像がなかった場合に表示する画像のURL' />"); //画像がなかった場合に表示する画像を指定します
feed.setNumEntries(5); //記事を読み込む件数を設定します
feed.load(dispfeed);
function dispfeed(result){
if(!result.error){
var container = document.getElementById("feed1"); //HTMLに書き出す対象のIDを指定します
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var entryImg = "";
var imgCheck = entry.content.match(/(src="http:)[¥S]+((¥.jpg)|(¥.JPG)|(¥.jpeg)|(¥.JPEG)|(¥.gif)|(¥.GIF)|(¥.png)|(¥.PNG))/); //画像のチェックをします、拡張子はここで増やします
if(imgCheck){
entryImg += '<img ' + imgCheck[0] + '" >';
} else {
entryImg += noPhoto;
}
container.innerHTML += '<div class="box02">'
+ entryImg
+ '<p>'
+ '<a href="' + entry.link + '">'
+ entry.title.substring(0,14)
+ '</a>'//タイトル
+ '</p>'
+ '</div>';
}
var linkBlank = container.getElementsByTagName('a'); // targetに'_blank'を設定します。不要な場合は、以下4行を削除
for (var j = 0, l = linkBlank.length; j < l; j++) {
linkBlank[j].target = '_blank';
} //target'_blank'ここまで
}
}
}
google.setOnLoadCallback(initialize);
</script>
スクリプトの7行目のRSSのURLを自分のブログのRSSのURLに変更しました。
変更前
var feed = new google.feeds.Feed("RSSのURL");
変更後
var feed = new google.feeds.Feed("http://vba-geek.jp/?xml");
また、8行名の画像がなかった場合に表示する画像のURLを自分のブログにアップした画像のURLに変更しています。
変更前
var noPhoto = ("<img src='画像がなかった場合に表示する画像のURL' />");
変更後
var noPhoto = ("<img src='http://blog-imgs-75.fc2.com/b/i/l/billyboy/fc2log1.jpg' />");
変更点2:表示する記事数の変更
スクリプト10行目で指定しているサイドバーに最新記事として表示する記事の件数を8件に変更しました。
変更前
feed.setNumEntries(5); //記事を読み込む件数を設定します
変更後
feed.setNumEntries(8); //記事を読み込む件数を設定します
変更点3:表示するサムネイル画像のサイズ指定
サムネイル画像は記事中の画像が使用されますが、そのサムネイル画像の表示サイズをサイドバーでの表示に合わせたサイズ(80X80)で表示できるようにコードを付け加えました。
付け加えました箇所は、28行目の手前です。
付け加えたコード
entryImg = entryImg.toString().replace(/\s/, ' height="80" width="80" ');
変更点4:スクリプトで生成するHTMLの変更
divタグ内で指定しているID名の変更、タイトル文字数の制限の削除などスクリプトによって生成されるHTMLを少し変更しました。
container.innerHTML += '<div class="box02">'
+ entryImg
+ '<p>'
+ '<a href="' + entry.link + '">'
+ entry.title.substring(0,14)
+ '</a>'//タイトル
+ '</p>'
+ '</div>';
}
変更後
container.innerHTML += '<div class="google_feed">'+ entryImg
+ '<a href="' + entry.link + '">'
+ '<p>' + entry.title + '</a>'
+ '</p></br></div>';
}
変更点5:新着記事がクリックされた時に別のウィンドウで表示する設定部分を削除
サムネイル画像付きの最新記事がクリックされた際に別のウィンドウで開くようにするための設定を行うスクリプト部分を削除しました。
削除したのは以下の4行です。
var linkBlank = container.getElementsByTagName('a');
for (var j = 0, l = linkBlank.length; j < l; j++) {
linkBlank[j].target = '_blank';
}
変更したスクリプト
上記の変更箇所を反映した最終的なスクリプトを以下に記載します。
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize(){
var feed = new google.feeds.Feed("http://vba-geek.jp/?xml");
var noPhoto = ("<img src='http://blog-imgs-75.fc2.com/b/i/l/billyboy/fc2log1.jpg' />");
feed.setNumEntries(8);
feed.load(dispfeed);
function dispfeed(result){
if(!result.error){
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var entryImg = "";
var imgCheck = entry.content.match(/(src="http:)[¥S]+((¥.jpg)|(¥.JPG)|(¥.jpeg)|(¥.JPEG)|(¥.gif)|(¥.GIF)|(¥.png)|(¥.PNG))/);
if(imgCheck){
entryImg += '<img ' + imgCheck[0] + '" >';
} else {
entryImg += noPhoto;
}
entryImg = entryImg.toString().replace(/¥s/, ' height="80" width="80" ');
container.innerHTML += '<div class="google_feed">'+ entryImg
+ '<a href="' + entry.link + '">'
+ '<p>' + entry.title + '</a>'
+ '</p></br></div>';
}
}
}
}
google.setOnLoadCallback(initialize);
</script>
サムネイル画像付きの最新記事一覧をサイドバーに設置する手順
以下に変更したスクリプトを基にサムネイル画像付きの最新記事の一覧をサイドバーに設置する手順を記載します。
変更したスクリプトの設置
変更したスクリプトを自分のブログのテンプレートの<head>～</head>に貼り付けます。
ブログのテンプレートの変更が伴いますので必ず変更前に複製を作ってバックアップをしておいてください。
貼り付けたら必ず[更新]をクリックしてテンプレートの変更を反映してください。
プラグインの追加と設定
サイドバーに設置する場合、FC2ブログではプラグインを使用します。
以下にその手順を記載します。
まず最初にFC2ブログの管理画面にログインします。
画面左の[設定]メニューの[プラグインの設定]をクリックします。
画面上の[プラグインの設定]からPC用の[公式プラグイン追加]をクリックします。
公式プラグインの一覧の[拡張プラグイン]から[フリーエリア]をクリックします。
[フリーエリアの編集]画面が表示されるので、[フリーエリア内容の変更]ボックスに以下のHTMLコードをそのまま貼り付けます。
<div id="feed"></div>
[タイトル]は"新着記事"や"最新記事"などの任意のタイトルに変更してください。
[設定]をクリックしてプラグインの設定内容を適用します。
以上でサムネイル画像付きの新着記事一覧をサイドバーに表示する設定は終了です。 次にCSSを使って自分のブログのサイドバーにあったスタイルに変更していきます。
サムネイル画像付きの新着記事一覧をサイドバーに表示するCSS
以下にFC2ブログ用に作ったCSSを記載します。 自分のブログのテンプレートのCSSの最後(挿入場所は任意)にコピー&ペーストしてください。
FC2ブログで使用しているCSS
.google_feed img{
/* padding: 5px 5px; */
float: left;
}
.google_feed p{
font-size: 14px;
overflow: hidden;
padding-bottom: 5px !important;
padding-left: 10px;
}
.google_feed a{
font-size: 14px;
line-height: 1.4;
}
.google_feed a:link {
color: #1111cc;
}
.google_feed a:visited {
color: #800080;
}
.google_feed a:hover {
color: #a00000;
}
フォントサイズやリンク文字列の色、リンクをクリックした時の色など自分のブログに合わせて任意に変更してください。
CSSを貼り付けたら必ず[更新]をクリックしてCSSの変更を適用してください。
注意事項
注意事項というか留意点というか...Google Feed APIを使用した場合、記事を書いてもすぐに反映されません。
つまり、新しく記事を書いてもサイドバーの最新記事一覧に表示されるまでに若干のタイムラグが生じます。
仕様上これは仕方のない事なのでがまんするしかありません。
FC2さんがこういったプラグインを用意してくれるのが一番いいのですが...
サムネイル画像付きで最新記事の一覧をサイドバーに表示するカスタマイズのまとめ
記事中の画像をそのまま使用してサイドバーにサムネイル画像付きで最新記事の一覧を表示するカスタマイズ方法について紹介しました。
難しいことはほとんどありませんが、自分のブログに合うようにカスタマイズする場合は、多少なりともスクリプトやCSSの知識が必要となりますが、私もほとんど素人同然なので大して敷居は高くないと思います。
CSSをもう少しカスタマイズすれば流行りのサムネイル画像にタイトルをかぶせて並べるなんてこともできます。
それはまた別の記事で紹介したいと思います。
コメント