(cache) はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに

ついに、はてなブログでトップページの一覧表示機能ができましたね！最近はてなブログはどんどん便利な仕様が追加されててカスタマイズ好きにとっては嬉しい限りです。
staff.hatenablog.com
今まで一覧表示にするにはCSSでなんとかそれっぽくしたり、/archiveページにJavaScriptでリダイレクトさせたりと無理矢理感があったのですが、これで簡単にトップページを一覧表示で多くの記事をスッキリと表示させることができるようになりました。（ただし、はてなブログProのみ）
f:id:syofuso:20170602165418p:plain
このブログにも一覧表示を使ってトップページをカード型レイアウトにするカスタマイズをしました。今回ははてなブログで難しいと思われたカード型レイアウトにするカスタマイズをご紹介します。

トップページを一覧形式にする

まずは管理画面→設定→詳細設定でトップページの表示形式（PC版）にチェックを入れて保存して下さい。トップページの記事数はここでは14にしました。
f:id:syofuso:20170602162457p:plain

CSS

追記：サムネ画像の問題を解決する方法を教えてもらったのでご紹介します。
CSSのコピペです。以下のコードを管理画面→デザイン→カスタマイズ→デザインCSSに追記して下さい。

/* トップページカード型 */
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.page-index .archive-entry {
  margin-bottom: 20px!important;
  padding-bottom: 20px;
  box-sizing: border-box;
  width: calc(50% - 20px);
}

.page-index .entry-thumb {
  display: none;
}

.page-index .entry-thumb-link {
  display: block;
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  margin-bottom: 10px;
}

@media (max-width:768px) {
 .page-index .entry-thumb-link {
    width: 50vw;
    height: 33.3vw;
  }
}

.page-indexをつけているのはトップページのみでカード型レイアウトを適用させるためです。アーカイブページは元のデザインのままです。

サムネ画像をアイキャッチ画像に置き換える

サムネ画像の問題を解決する方法を orefolder (id:c-miya)さんの記事で教えていただきました！これで解決（他力ｗ）！
www.foxism.jp
ぬる太 (id:nuruta)さんの記事を元に改変されたコードだそうです。
nuruta2.hatenablog.com

以下のコードを管理画面→デザイン→カスタマイズ→ヘッダかフッタに貼って下さい。

<script>
document.addEventListener('DOMContentLoaded', function(){
$(function() {
$(window).bind("load", function(){
  if(!(document.URL.match("/archive"))) {
    $(".entry-thumb-link").each(function() {
        var thumb_link = this;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', thumb_link.href, true);
        xhr.onload = function(e) {
            if (e.target.status <= 200) {
                var d_ = e.target.response;
                var eye_catch = $('meta[property="og:image"]', d_)[0].content;
                thumb_link.style.backgroundImage = 'url(' + eye_catch + ')';
            }
        };
        xhr.responseType = 'document';
        xhr.send(null);
    });
  }
});
});
});
</script>