アーカイブページのカード整形

はてなブログ用テーマ「マテリアルぽっぷ」のカスタマイズ例。

demo-mamegoro.hatenablog.com

「マテリアルぽっぷ」は記事一覧ページ（＝トップページ）のカードをタイル状に並べた、レスポンシブデザインのテーマ。
その名の通りポップで見やすく使いやすい！

ただ、文章メインのブログなので、トップページは縦型カードより、タイトル文を強調できる横に長いカードを置けたらいいなと思っていた。

そこでアーカイブページ内のカードの形状や並べ方を調整。
Google Chromeの検証機能を使って確認しつつ、手直しした。

目的・目指すもの

• PCブラウザでは横型カードを縦1列に並べたい。
• 横型カードは左半分にサムネイル、右半分に記事タイトルを入れたい。カテゴリ名の表示位置も調整したい。
• スマホや小さめのブラウザでは、「マテリアルぽっぷ」デフォルトの縦型カードで並べたい。
• 「マテリアルポップ」デフォルトの、レスポンシブルにカードの大きさが調整される機能は残したい。

出来上がり

ブラウザ横幅が1200pxを超える

メインカラムに横型のカードが縦1列に並び、その右にサイドメニューが表示される。
「ブラウザ横幅＞1200px」でサイドメニューを表示する方法は、テーマの解説ブログで製作者さんが公開してくださっている。

demo-mamegoro.hatenablog.com

ブラウザ横幅が1200～560px

メインカラムに横型のカードが縦1列に並ぶ。サイドメニューはブログ下部。

ブラウザ横幅が560px以下

カードが縦型（デフォルトデザイン）に変化する。

CSSコード

以下をCSSに追加。

/* ===============
  TOPページ・Archivesページ
=============== */

/* 大ブラウザではサムネ・タイトルが左右に並ぶ横型カード */
@media screen and (min-width:561px) {
.page-archive .archive-entry {
  position: relative;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25);
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  background: #fff;
}
.archive-entry-header {
/* 記事タイトル表示スペースをカードの右半分に置く */
  order: 1;
  color: #FFF;
  width:50%;
  height:100%;
  padding: 40px 15px 40px;
}
.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories {
/* カテゴリを左上に固定 */
  position: absolute;
  top:5px;
  left:10px;
  height: 24px;
  z-index: 100;
  background: #4f8299; 
  border-radius: 8px;
  padding: 0 10px;
  font-size: 80%;
  font-weight: bold;
}
.entry-thumb-link {
/* サムネをカードの左半分に置く */
  order: 0;
   color: #FFF;
   width:50%;
   height:100%;
}
.archive-entry-body {
  order: 2;
}
}
/* 小ブラウザではサムネ・タイトルが上下に並ぶ縦型カード */
@media screen and (max-width:560px) {
.page-archive .archive-entry {
  position: relative;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.page-index .enable-top-editarea .page-archive .archive-entry:hover,.page-archive .archive-entry:hover  {
  transform: translateY(-5px);
  box-shadow: 0 0 3px 0 rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.25);
  transition: .3s ease-in-out;
}
.page-archive .entry-thumb {
  position: relative;
  top: 0;
  width: 100%;
  height: 15vw;
}
.page-archive .entry-thumb {
  background: no-repeat center center;
  background-size: cover;
  border-radius: 8px 8px 0 0;
}
}
/* カードサイズ調整 */
@media screen and (min-width:1201px) {
  .page-archive .entry-thumb {
    min-height: 280px; 
  }
}
@media screen and (max-width:1200px) {
#content {
    width: 95vw;
}
  .page-archive .entry-thumb {
    height: 25vw;
  }
}
@media screen and (max-width:768px) {
  .page-archive .entry-thumb {
    height: 35vw;
  }
}
@media screen and (max-width:560px) {
  .page-archive .entry-thumb {
    height: 45vw;
  }
}