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でカスタマイズ

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

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

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

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