Blogger：サムネイル付き最新記事一覧を表示しよう

Bloggerで「サムネイル付きの最新記事一覧」を表示させる方法を解説します。
「Bloggerで」「サムネイル付き」「最新記事一覧」という三つの条件を満たすもので、初心者にも分かるものが無く苦労したので自分でも記事にしておこうと思いました。

おまけとして、最後に「人気の投稿ガジェットのCSSカスタマイズ」と、「最新記事の一覧」を表示させる方法についても書いておきます。

目次

• サムネイル付き最新記事一覧の設置方法
• 「人気の投稿」ガジェットをCSSでカスタマイズ
• 最新の投稿一覧を表示させるJavascript
• ブログにメニューバーを表示する方法

では方法を解説します。

手順

手順は大きく分けて３つです。

1. JQueryを導入
2. ガジェットにJavascriptを貼り付ける
3. CSSでカスタマイズ

JQueryを導入

ブログのカスタマイズについて調べていると頻繁に出てくるこのJQueryですが、これについて一般人が深く理解する必要はないと思います。
以下のテキストを</head>の真上に貼り付けて済ませましょう。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>

これは一度行えば、以後JQueryが必要なカスタマイズではJQueryそのものについては考える必要はなくなります（この手順は一回きりでいい）。

ガジェットにJavascriptを貼り付ける

かなり長いですが、以下のコードをブログの管理画面→レイアウト→ガジェットを追加でHTML/Javascriptの追加を行い貼り付けてください。

青くマークしてある部分を書き換える必要があります。

,0,4は記事の取得の始めと終わりを示します。
ここでは最初から数えて４つの記事を表示させることになります。
後半のCSSの設定でサムネイルのサイズなどをいじりますが、ヘッダー下に表示させるなら４つぐらいでいいと思います。

raionnoieはあなたのブログのアドレスに置き換えてください。

<div id="headline" class="clearfix"/>
<script>//<![CDATA[
(function(window,name,element,offset,max,size){
window[name] = function(d){
    var es = d.feed.entry;
    var item = 0;
    var root = $(element);
    for(var i = offset, k = es.length; i < k && item < max; i++){
        var e = es[i];
        var c = e.content.$t;
        var img = $(c).find("img").first();
        var src = img.attr("src");
        if(src && src.indexOf("https://blogger.googleusercontent.com/tracker/") != -1) continue;
        if(src.search(/^(http|https)+\:\/\/lh\d+\.googleusercontent.com\//i) != -1 || src.search(/^(http|https)+\:\/\/\d+\.bp\.blogspot\.com\//i) != -1 || src.search(/^(http|https)+\:\/\/lh\d+\.ggpht.com\//i) != -1){
            var a = src.split('/');
            if(a.length == 9) a[7] = size;
            else if(a.length == 8) a[7] = size + '/' + a[7];
            src = a.join('/');
        }
        var link;
        for(var j = 0, l = e.link.length; j < l; j++){
            if(e.link[j].rel.indexOf("alternate") != -1){
                link = e.link[j].href;
                break;
            }
        }
        root.append(
            $("<div/>").addClass("outer").append(
                $("<div/>").addClass("inner").append(
                    $("<a/>").attr("href",link).append(
                        $("<img/>").attr("src",src)
                    )
                ),
                $("<p/>").addClass("title").append(
                    $("<a/>").attr("href",link).append(e.title.$t)
                )
            )
        );
        item++;
    }
};
})(window,"headline","#headline",0,4);
//]]></script>
<script src='http://raionnoie.blogspot.com/feeds/posts/full?redirect=false&amp;max-results=10&amp;alt=json-in-script&amp;callback=headline'></script></div>

CSSでカスタマイズ

テンプレート→HTMLの編集で以下のCSSを貼り付けます。

掲載したものは私のブログで使っている設定です。
色をつけてマークしたあたりを中心に自分のブログに合わせたカスタマイズが必要でしょう。

ここでのポイントとしては

1. ブログの横幅を分割したサイズを、サムネイルの横幅にする
2. 上下の隙間をなくす（ブログのバナーやメニューバーとの隙間をなくす）

ということです。
１も２も同じ趣旨で、フラットデザインにすることを目的としています。

フラットデザインの例はアップルのサイトなどを見ればわかりやすいと思いますが、影がないペラペラというだけでなく（これは厳密には間違いです）、画像を枠いっぱいに配置するということも隠れた法則になっています。

そうすると上の画像のように、画像と画像がぴったりとくっついて配置されることになります。アップルのサイトでは1ピクセルほど画像と画像の間に隙間がありますが、僕は左右については隙間を開けないことにしました（計算が楽）。

赤：この数値で左右の余白を操作します。
オレンジ：表示するサムネイルのサイズを指定。後半２箇所の数値もこれにそろえる。ブログの横幅が1020で４つサムネイルを表示させるなら、1020÷4=255となります。
緑：上下の余白を変更。bottomをtopに置き換えれば上の余白が変更できます。
青：文字の背景の透明度。6=60%。

.clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;}
.clearfix{min-height: 0px;
margin-left: -30px;
margin-right: -40px
}
* html .clearfix{height: 1px;/*\*//*/height: auto;overflow: hidden;/**/}
#headline .outer{
    float:left;
    text-align:left;
    overflow:hidden;
    width:255px;
    height:150px;
    position:relative;
margin-bottom:-30px;}
#headline .outer p.title{
    width:255px;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#000;
    background-color:rgba(0,0,0,0.6);

margin-bottom:-4px;}
#headline .outer .title a{
    display:block;
    padding:5px 5px;
    color:white;
    text-decoration:none;}
#headline .inner img{width:255px;}

おまけ１：人気の投稿ガジェットのCSSカスタマイズ

Bloggerの標準ガジェットに「人気の投稿」を表示させるガジェットがありますが、デザインのカスタマイズができないという弱点があります。
これをCSSを使ってカスタマイズしようというものです。

赤：記事と記事の間隔。15pxの部分が上下の間隔。
黄：記事の要約部分のフォントサイズ
緑：タイトルのフォントサイズ

.PopularPosts .widget-content ul li {
padding:15px 0;}
.item-snippet {
font-size:13px;}
.item-title {
font-size:18px;}

おまけ２最新記事一覧

いろいろと試したのですが、一番便利だったのがFeed2JSです。ただ、これを使うとサイトの表示速度自体は若干低下するので弱点がないわけではないです。といってもそれほど影響しないので気にせず使えばいいでしょう。

以下のサイトで取得したコードをHTML/Javascriptの追加で、追加すればいいとう簡単で便利なものです。

Feed2JS
http://feed2js.org/index.php?s=build

指示に従って項目を埋めていけばいいのですが、英語でわかりにくい部分もあります。
僕も以下のサイトを参考にして設定したので、こちらのリンクを載せておきます。

Feed2JS の使い方
http://blogger.kuribo.info/2006/02/feed2js.html

ブログにメニューバーを設置する

メニューバーの設置方法については以下の記事を参考にしてください。

Bloggerでメニューバーを設置する方法

http://raionnoie.blogspot.jp/2013/04/blogger_17.html#more

なお、この記事は以下のサイトを大幅に参考にさせていただきました。

投稿された記事をサムネイル表示して訪問別PVを改善する方法
http://blogger.weblix.net/2012/07/blogger-post-thumbnail-javascript.html

ここまで読んでいただきありがとうございます。ブログカスタマイズで楽しいブログライフを。