Minimal Green

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

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

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

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

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

CSS

CSSのコピペです。以下のコードを管理画面→デザイン→カスタマイズ→デザインCSSに追記して下さい。PC版のみカード型になるように変更しました(スマートフォンでカード型は見づらいため)。

/* トップページカード型 */
@media (min-width: 768px){
.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 {
  float:none;
  display: block;
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  border-radius: 8px;
}
.entry-thumb-link:hover {
opacity:0.7;
}
}

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

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

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

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

追記:2017年07月11日以降、はてなブログの仕様変更のため、以下のScriptは不要になりました!
staff.hatenablog.com
はてなブログの改善のお陰でScript無しでもサムネ画像はボケずに表示されます。ありがたい!

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

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

カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

はてなブログテーマ制作

有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事