Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

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

※2017年6月4日20:52以前の記事のコードを実装された方はコードを修正したので、カスタマイズを実装された方をもう一度CSSを貼り直して下さい。

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

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

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

CSS

追記:サムネ画像の問題を解決する方法を教えてもらったのでご紹介します。
追追記:CSSコードに間違いがあったので修正しました。コピペした方は貼り直しをお願いします。またこの方法だと表示速度が遅いので末尾に追記したつばさのーとさんの記事をご参照下さい。
CSSのコピペです。以下のコードを管理画面→デザイン→カスタマイズ→デザインCSSに追記して下さい。

/* トップページカード型 */
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  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;
}
.entry-thumb-link:hover {
opacity:0.7;
}
/* ブレークポイントは各自のテーマに合わせて下さい */
@media (max-width:767px) {
 .page-index .archive-entry {
  width: calc(50% - 10px);
}
 .page-index .entry-thumb-link {
    width: 44vw;
    height: 30vw;
  }
}

.page-indexをつけているのはトップページのみでカード型レイアウトを適用させるためです。アーカイブページは元のデザインのままです。
ブレークポイントはここでは767pxにしていますが、テーマに合わせて適宜調整して下さい。

また本文の抜粋文が長くて気になる場合は非表示にして下さい。以下のCSSを追記。

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

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

サムネ画像の問題を解決する方法を orefolder (id:c-miya)さんの記事で教えていただきました!これで解決(他力w)!
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>

http://www.foxism.jp/entry/2017/06/02/154514より引用
これで問題なくカード型レイアウトにできました。orefolder (id:c-miya)さん、ぬる太 (id:nuruta)さんありがとうございました。
カスタマイズネタ丸かぶりで、すみませんw

追記:カード型レイアウト別の方法

つばさのーとさんもカード型のカスタマイズ記事書かれています。こちらの方がscriptスッキリしてて表示速度的にも良いかもしれません。(速度パフォーマンス的にこちらの方がおすすめ
是非ご参照下さい。
www.tsubasa-note.blog