最新記事表示プラグインをつくってみました

photo by Eduardo Duccigne

当ブログのようにトップページに最新記事の一覧をサムネイル表示するフラグインを作りました。
どんな形にするか悩んだんですが、結局jQueryプラグインにしてみました。
jQueryプラグインの柔軟性はやはり凄い。

というわけで、早速使い方を説明します。

google Feed APIに登録

こう書くと難しそうですが、いえいえ、誰でもできますので大丈夫。
ここでAPIキーを取得します。
「My web site URL:」の入力フォームにあなたのブログのURL(うちならhttp://ameblo.jp/blog-lab/になります)を入力して、Generate API Keyをクリックするだけ。
するとあなたのAPIキーが表示されます。



これですね。長いっ！
これをコピーしてメモします。

表示する場所を決める

コピーできたら、好きなところ(ボクの場合はメッセージボード)に次のように書いてください。

<div id="leDisplay" style="display:none;"></div>

プラグインに貼りつけ

次はフリープラグインに以下のように貼ります。

<script src="https://www.google.com/jsapi?key=あなたのAPIキー" type="text/javascript"></script>
<script src="http://usrcss.ameblo.jp/skin/templates/9d/2c/10019650816.css" type="text/javascript"></script>
<script type="text/javascript">
$(function(){$("#leDisplay").leDisplay();});
</script>

オプションとして、表示件数(10件まで)と、記事に画像が無い場合に表示する画像を選べます。
$("#leDisplay").leDisplay();の部分を、
$("#leDisplay").leDisplay({numEntries:表示件数,noimgURL:"表示する画像のURL"});に変えればOKです！

CSSで見た目を整える

これだけだとただ画像が縦に繋がって表示されるだけですので、CSSで整えなければいけません。
好きなように整えていただければ良いんですが、ここでは一例を挙げさせてもらいます。

div#infotip{
background:#FFFFFF;
border:solid 1px #aaaaaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 4px 4px 4px #414141;
-webkit-box-shadow: 4px 4px 4px #414141;
padding:0px;
font-size:14px;
text-align:left;
}

div#infotip .pubdate{
padding:4px;
font-weight:bold;
font-size:12px;
color:#fff;
background:#414141;
}

div#infotip .pubtitle{
padding:4px;
font-weight:bold;
font-size:14px;
}

#leDisplay{
height:140px;
}

#leDisplay .thumbnailWrapper{
overflow:hidden;
width:65px;//画像の見える部分の幅
height:65px;//画像の見える部分の高さ
border:solid 1px #414141;
margin:10px 0 0 10px;
float:left;
}

#leDisplay img.thumbnail{
width:100px;//画像全体の幅
}

これはノーマルの3カラムの場合に丁度いい幅になるかと思います。

ちなみにボクの場合は・・・

div#infotip{
background:#FFFFFF;
border:solid 1px #aaaaaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 4px 4px 4px #414141;
-webkit-box-shadow: 4px 4px 4px #414141;
padding:0px;
font-size:14px;
text-align:left;
z-index:9999;
}

div#infotip .pubdate{
padding:4px;
font-weight:bold;
font-size:12px;
color:#fff;
background:#414141;
}

div#infotip .pubtitle{
padding:4px;
font-weight:bold;
font-size:14px;
}

#leDisplay{
display:none;
width:632px;
height:170px;
background:#ddeeee;
border:solid 1px #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 4px 4px 4px #414141;
-webkit-box-shadow: 4px 4px 4px #414141;
}

#leDisplay .thumbnailWrapper{
overflow:hidden;
width:110px;//画像の見える部分の幅
height:70px;//画像の見える部分の高さ
border:solid 1px #414141;
margin:8px 0 0 12px;
float:left;
}

#leDisplay img.thumbnail{
width:125px;//画像全体の幅
}

こんな感じです。

ちなみにDOM構造は

div id"leDisplay"
　div class"thumbnailWrapper"
　　a class"vtip"
　　　img class"thumbnail"

という感じになっていますので、CSSでお好きなように調整していただければ良いかなと思います。

記事の話題関連のツイート on twitter