最近のブログって、記事を代表する写真が一枚あって、その写真を一覧表示してリンクを張ってるじゃないですか。いわゆるサムネイル画像表示ですよね。僕もやりたいなーと思ってFC2ブログの設定ページを見てみたのですが、それらしいものがない。ぐぐってみると、FC2ブログには（基本的には）そういう機能はないとのこと。マジか。それもうブログじゃないじゃん！

スポンサーリンク

FC2ブログではサムネイル表示できない（ただし語弊あり）

まず、FC2ブログでよく紹介されているテクニックとしては最新記事の一覧を表示させる箇所で、テンプレート上のimgタグのsrcを[ブログのファイル用パス]/[任意の名前]<%recent_no>.[拡張子]としておく方法ですね。

【FC2ブログ】最新記事一覧にサムネイル画像を表示する方法より。こちらのサイトによくまとまってるんですが、

  • 画像のファイル名を、エントリ番号.jpgにして、画像とエントリ番号を対応付ける。
  • FC2ブログのプラグイン変数機能でエントリ番号を読みだし、対応づいている画像ファイルを読み込む。
  • ただし画像のアップロード先サーバは、不定期に変更されるので、時期によって異なるパスに画像がアップロードされる。
  • サーバ名を返す変数がないので、あるエントリ番号の画像がどのパスにあるか判定できない。

という、あれ、あんまり要約になってないですが、つまりそういうことが起きてしまうので、FC2ブログ標準機能では事実上、サムネイル画像を表示することは不可能なのです。そこで、引用元にもありますように、javascriptを用いて無理やり表示させる必要がでてきます（これも引用元にありますが、<%topentry_image_72>というしょぼい変数を使うと一応、サムネイル画像が表示できます。しかし、使える場所が限られているし、出てくる画像もしょぼいのです）。

それで親切にjavascriptのコードも引用元で紹介されているんですが、はっきりいってjavascriptなんてよく分からないので、せっかくなのである程度分かるようになってから使ってみようと思い、インターネットでお勉強したところ、今流行のjQueryを使うと最高にcoolということが分かりました。

最高にCOOL、jQuery

何がcoolかって、今風なものを使うっていうのが、cool。潮流に乗ってる気がします。でも、使いはじめるの、面倒なんでしょう？　いえ、そんなことはありません。なんか知らないんですが、はじめからソースに入ってました。

<script type="text/javascript" src="http://static.fc2.com/js/lib/jquery-1.10.2.min.js"></script>

多分誰かが入れたんでしょうね。この一行が入ってればもう使えるらしいです。で、肝心の使い方も、「難しいことはよくわからないけど、なんとなくこれは動きそうな気がする」というレベルで使えるのです。これはすごい。最高にcool。僕はこのjQueryを使ってFC2ブログでサムネイル表示する！　そう決めました。

こちらが出来たコードです、まずはプラグイン

前置きが長くなりました。つまり、まずはじめに「プラグインの設定」から「最新記事」の詳細設定を開いて、「 【HTMLの編集】を行います。（上級者向け）」を開きます。そして、今書いてある内容をすべて消去して、次のコードを貼り付けます。

<div align="center">
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>">
<div class="recentcont" style="background-image:url(http://blog-imgs-88.fc2.com/g/k/m/gkmsxho/<%recent_no>s.jpg);" recent_no="<%recent_no>">
<div class="recenttitle"><%recent_title></div>
</div>
</a>
<!--/recent-->
</div>

ここでお断りしておきますが、私、さくらは友枝小学校に通う小学4年生程度の知識しかありませんので、HTML、CSS、javascript、なんでも適当でござれであります。試行錯誤でうまくいったらまあいいか、なので、変数名もアレです。賢明な読者諸君には、これを美しいコードにするべく、頑張っていただきたい。

さて、ここで僕が頑張ったポイントとしては、画像ファイルを背景画像background-imageとして読み込んだことです。はじめはimgタグで頑張ってましたが、僕的にはこうすると良いかなと思いましたので。なんでだったかは忘れましたが、確かあとから柔軟にサイズを変更できそうとか、前述のFC2アップロード先サーバ変更時に読み込めなかった画像ファイルにバツマークが表示されないからとか、なんかそんなんです。

ここで画像のurlとして、blog-imgs-88というサーバ名がハードコピーされてますが、ここには一番直近の画像がアップロードされたサーバ名を入れておいてください。いわばデフォルトで表示される、一番初めに画像を探しに行くパスになります。

CSSもいれよう

.recentcont {position:relative; width:192px; height:108px; background-color:#eebbcb; background-size:contain;   -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
border-radius: 2px;}
.recentcont a {color:white;}
.recenttitle {position:absolute; bottom:0; right:0; margin:5px; font-weight:bold; color:white; text-shadow: 0px 1px 14px rgba(0, 0, 0, 0.55); text-align:right;}

ドン。臆面もなく、こんなCSSを載せます。インデントなんか知らないもん。しかも途中でbox-sizingという超すごい最新のCSSを知っちゃったから、そのままコピペしてドン。とにかくドン。このコードにかけた、僕の気持ちをここに記しておきます。「うちの日記の写真は16:9で作ってるから、うまく割り切れそうな192x108pxで表示させよう。もし画像ファイルの読み込みに失敗したときのために、背景色を設定しておいて、もともとそういうフラットデザインのつもりなんだよという風に見せかけよう。あと、やっぱり画像の上に記事のタイトルをオーバレイ表示したいよね」これを僕がコーディングすると上のようになります。「テンプレートの設定」の「スタイルシート編集」欄一番下にぶちこめばよろしいです。

さあjQueryだ

<script>
$(function() {
  $('div.recentcont').each(function() {
    var entrynum = $(this).attr("recent_no");
    if (entrynum <= 4) 
      $(this).css("background-image",$(this).css('background-image').replace(/imgs-88/g,"imgs-83"));
  });
});
</script>

「テンプレートの設定」から「HTML編集」の適当なところにぶち込めばいいそうです。僕はとりあえず</head>の前辺りにぶち込みました。

さあ、おわかりいただけますでしょうか。entrynum <= 4とは何か……？　そう、これが今回のポイント。うちのサーバの場合、エントリ番号4番の次(5)から、別のサーバ(blog-imgs-88)にアップロードされるようになってしまったのです。4番までは、末尾83のサーバにアップロードされていたのに……。なので、エントリ番号によって、適切なサーバに書き換えるようにしました。今後、もし88のサーバからまた新しいサーバに画像がアップロードされるようになってしまった場合は、上記コードに追記＋置換で、下記のようになります。

<script>
$(function() {
  $('div.recentcont').each(function() {
    var entrynum = $(this).attr("recent_no");
    if (entrynum <= 4) 
      $(this).css("background-image",$(this).css('background-image').replace(/imgs-92/g,"imgs-83"));
    else if (entrynum <= 20) 
      $(this).css("background-image",$(this).css('background-image').replace(/imgs-92/g,"imgs-88"));
  });
});
</script>

これはエントリ番号21の記事から、新しいサーバ92にアップロード先が変更になった場合ですね。併せて、テンプレート欄のデフォルトのサーバ名も、最新のサーバ名92に変更しておく必要があります。そうしたほうが画像読み込みの分、処理が速そうなので。

そんなわけで実際に出来たのが、→にあります最新記事一覧です。頑張った。さくら頑張ったよ。やっぱり画像が表示されると、ぐっと、ブログらしくなりますね。

最新記事一覧だけじゃなく、関連記事一覧も画像表示したい

この日記のトップページには表示されないんですが、各記事個別のページを表示すると、記事の最後に同じカテゴリの記事一覧が表示されるようになっています。ここにも画像表示させたいですよね。というわけでやってみました。

HTMLを編集する

<!--relate_list_area-->
<div class="relate_list">
<h3>関連記事</h3>
<div class="relatebox_cont">
<!--relate_list-->
  <div class="relatebox" align="center">
    <a href="<%url><%topentry_relate_url>" title="<%topentry_relate_title>">
      <div class="relatecont" style="background-image:url(http://blog-imgs-88.fc2.com/g/k/m/gkmsxho/topentry_relate_urls.jpg);" topentry_relate_url="<%topentry_relate_url>">
        <div class="relatetitle"><%topentry_relate_title></div>
      </div>
    </a>
  </div>
<!--/relate_list--> 
</div>
</div>
<!--/relate_list_area-->

これは<!– / read_more –>（日記の内容の最後）と<div class=”entry_footer cf”>（コメント欄とかの始まり）の間に追記します。ちなみに今更ですが、<!–とHTMLでリマークされている文字列は、よくわからんのですが、FC2ブログのサーバ側で処理されて、適切な内容に置換されるそうですので、「コメントだから削除しちゃえ」は通用しないというか、かなり重要な変数？　になります。

実際、このコードにある<!–relate_list_area–>も、FC2ブログ側でうまくやってくれる目印となっているのですが、初期状態ではこのコメントを書いても無視されます。無視されないようにするには、「環境設定」から「ブログの設定」→「記事の設定」を開き、関連記事リスト表示場所を「テンプレート変数のみ」に設定する必要があります。

デフォルトの画像ファイルURLがtopentry_relate_urls.jpgになってますが、これはあとでjQueryで置換されるところです。「関連記事」で使える変数には、「最新記事」で使えるエントリ番号を示す変数に相当するものがなく、近いものとして、エントリへのURLが取得できます（<%topentry_relate_url>）。blog-entry-4.htmlという感じで。この4がエントリ番号なので、あとでjQueryで4だけ抜き取ることで、画像ファイルとリンクを関連付けます。

参考程度にCSSも……

.relatebox_cont {text-align:center;}
.relatebox {display:inline-block; margin:0; padding:0; width:30%; text-align:center;}
.relatecont {position:relative; width:192px; height:108px; margin:8px auto; background-color:#eebbcb; background-size:contain;   -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
border-radius: 2px;
}
.relatecont a {color:white;}
.relatetitle {position:absolute; bottom:0; right:0; margin:5px; font-weight:bold; color:white; text-shadow: 0px 1px 14px rgba(0, 0, 0, 0.55); text-align:right;}
@media screen and (max-width:700px) {
.relatebox {width:50%;}
}

これはね、ほんとうもう、とにかく動いて……。いま動かなきゃみんな死んじゃうんだ……。そういう気持ちで書きました。どんなふうに表示させたいかっていうのは個々人で異なると思いますので、参考程度に。しかしこの@mediaってやつすごいですよね。画面サイズに応じていろいろ変わるんです。どんなものなのかは全く調べてないですが、もともとのコードに書いてあって、もしかして？　と思ってやってみたら動いたので書いてみました。適当すぎる。

FC2ブログでjQueryを使って関連記事サムネイル画像表示

<script>
$(function() {
  $('div.relatecont').each(function() {
    var entrynum = $(this).attr("topentry_relate_url").replace(/blog-entry-([0-9]*)\.html$/g,"$1");
    $(this).css("background-image",$(this).css('background-image').replace(/topentry_relate_url/g,entrynum));
    if (entrynum <= 4) 
      $(this).css("background-image",$(this).css('background-image').replace(/imgs-88/g,"imgs-83"));
  });
});
</script>

例によってHTMLのHEADとかBODYとか、まあどこでもいいらしんですけど、追記します。仕組みについてはさっき書いたとおりです。最新記事をサムネイル画像表示する方法（サーバ移転回避方法）が全く同じなので、縦に2つ並べて書いちゃうと、かなり冗長な感じがします。でもね、そういう細かいことは気にしないんだよ。動けばいいんだからね。

道のり長かった

3日くらい頑張ってやっと出来たので、FC2ブログに絶望した皆様の、少しでもお役に立てれば嬉しいなと思って書きました。何度でも言いますが、僕は素人なので、上記コードに関して、うまく動かないとか、醜いとか、読む気がしないとか、そういったクレームにはご対応いたしかねますので、あらかじめご了承ください。まあ、でも、結構調べたりするのとか楽しいですし、うまく動くと嬉しいので、みなさんもぜひやってみてください。なんとかなるよ。絶対大丈夫だよ。

Posted in 情報技術

Published by さくら

これまでに僕がアマゾンへ支払った金額を集計してみたら、数百万円に達していました。もちろん僕が購入して、僕が楽しむだけでも大変結構なのですが、せっかくなら感想やレビューを形に残して、みなさんのお役に立ちたいと思いました。友達が少ないので、感想を伝える相手がいないんです。よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。