【CSSで簡単】Blogger記事一覧をスマホで横並び＋カード風に整える方

本記事は、BloggerのQooQテーマを使いスマホの「記事一覧」をカード風に最適化した実録レポートです。サムネイルを左、タイトルを右に配置し、16:9で統一・タイトル3行・薄い影で読みやすく。SEO/AdSenseのナビゲーション誤認に配慮した安全なカスタマイズ手順を、コピペできるCSS付きでまとめました。

この記事のゴール（Before → After）

既定の一覧はサムネイルが大きく縦積みで、スクロール量が増えがちでした。そこで以下を同時に実現します。

• サムネイル左／テキスト右の横並びに（視線移動が短く、情報が読み取りやすい）
• サムネイルは16:9で統一（高さバラつき・行ズレ解消）
• タイトルは3行まで（長いタイトルでもレイアウト崩れを防止）
• カテゴリ→日付の順で整列（情報の優先度が明確）
• 薄い影（box-shadow）でやさしく区切り、線や装飾過多を避けてAdSense誤認を回避

すべてCSSのみで対応し、テンプレート本体の大改造は不要。PC表示の見た目は維持しつつ、スマホだけ最適化します。

最終形：コピペOKの完成CSS（スマホのみ適用）

管理画面 → テーマ → カスタマイズ → 詳細設定 → CSSを追加 に、以下をそのまま貼り付ければOKです。

@media (max-width:768px){

  :root{
    --thumb-w: 128px;  /* サムネ幅（120〜140pxで調整） */
    --gap: 12px;       /* 画像とテキストの間隔 */
  }

  /* 記事リストの1アイテムを2カラムのGridに */
  .list-item,
  .list-item > a{
    display: grid !important;
    grid-template-columns: var(--thumb-w) 1fr;
    column-gap: var(--gap) !important;
    align-items: start !important;
    margin: 14px 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* 薄い影で区切り（好みで調整） */
    border-radius: 0; /* 角丸なし。丸めたいなら 6px */
  }

  /* サムネイル：16:9に統一（高さが揃い、行ズレ解消） */
  .list-item img{
    width: var(--thumb-w) !important;
    height: calc(var(--thumb-w) * 9 / 16) !important;
    aspect-ratio: 16/9;
    object-fit: cover !important;
    border-radius: 0 !important; /* 四隅を直角に */
    display: block;
    margin: 0 !important;
  }

  /* テキスト側：上端を画像とそろえ、少しだけ下げて美しく */
  .list-item-inner{
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: .4em !important;
  }

  /* タイトル（3行まで表示、画像上端より8px下から開始） */
  .list-item-inner h2,
  .list-item-inner h3,
  .list-item-title{
    order: 1 !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin: 8px 0 0 0 !important; /* ←好みで 6〜10px */
    font-weight: 700 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  /* カテゴリ（バッジ）→ 日付の順に */
  .list-item-category{
    order: 2 !important;
    display: flex !important;
    gap: .35em !important;
    margin: 0 !important;
    font-size: .82rem !important;
    justify-content: flex-start !important;
  }
  .list-item-category-item{
    padding: .25em .6em !important;
    border-radius: 3px !important;
  }

  .list-item-date{
    order: 3 !important;
    font-size: .82rem !important;
    opacity: .8 !important;
    margin: 0 !important;
  }
}

適用手順（AdSense配慮の安全ルート）

1. バックアップ：テーマ > カスタマイズ > HTMLを編集からテンプレートを一括保存（万一の復旧用）。
2. カスタムCSSの追加：テーマ > カスタマイズ > 詳細設定 > CSSを追加に上記CSSをまるごと貼り付け。
3. 競合を排除：以前に入れていた「スマホ用の記事一覧CSS（flexや%幅指定）」は削除。重複で意図しない表示になるのを防ぎます。
4. プレビューで確認：スマホ表示のみが変わっていることを確認（PCは未変更）。
5. CLS（レイアウトシフト）対策：画像は16:9固定なのでスクロール中のガタつきが減り、ユーザー体験と広告評価にプラス。

なぜこの設計が「SEO/AdSenseに強い」のか

• 情報の密度を調整：サムネを小さく左に寄せ、タイトル3行までで一覧の走査速度を上げる（直帰率・回遊改善が見込めます）。
• ナビゲーション誤認の回避：派手なボタン風装飾や外部リンク・画像リンクは避け、シンプルなリンクのみ（AdSenseポリシーに配慮）。
• CLSの抑制：aspect-ratio:16/9で高さを先に確保し、描画後のズレを抑制（モバイルCore Web Vitalsに好影響）。
• 可読性の安定：-webkit-line-clampでタイトルを最大3行に制御。長文タイトルでも崩れず、一覧での印象が揃います。

数値の目安とデザイン調整のコツ

• サムネ幅（--thumb-w）：128pxが基準。情報量が多いなら120px、画像重視なら140px。
• 画像とテキストの間隔（--gap）：一覧をタイトにしたいなら10px、ゆとりを持たせるなら14px。
• タイトル開始位置（margin-top）：8pxが自然。行間・フォントによって6〜10pxで微調整。
• 影（box-shadow）：標準は0 2px 6px rgba(0,0,0,0.08)。もっと控えめなら0.05、強めなら0.12へ。
• タイトル文字サイズ（.list-item-title / h2 / h3）：基準は1.05rem。情報密度を上げたいときは1.00rem、見出しを強調したいときは1.10〜1.12remまでがバランス良。
  併せて行間は1.45〜1.55、最大表示行数は-webkit-line-clamp: 3（2〜4行で調整）がおすすめ。

実録メモ：つまずきと解決策（同じ悩みを最短で解消）

• 画像サイズが微妙にバラつく：%幅指定をやめ、aspect-ratio:16/9＋Gridで左列を固定幅に。元画像が16:9ならぴたりと一致。
• タイトル左の“開始ライン”が揃わない：右列にdisplay:flex＋justify-content:flex-start、タイトルに適切なmargin-topを付与。
• ラベル・日付の順序がページによって違う：CSSのorderで タイトル→カテゴリ→日付 を強制整列。
• 罫線か影かで迷う：AdSenseのナビゲ誤認を避け、見た目の圧を下げたいなら薄い影が無難。線は情報的で固め。

よくある質問（Q&A）

Q. 画像の角丸は付けない方がいい？

A. 本記事では角丸なし（0）を採用。背景が白基調なら直線的でフラットに整います。丸めたい場合は border-radius:6px; に。

Q. 2行にしたい／4行にしたい等の調整は？

A. -webkit-line-clamp: 2; や 4; に変更。長すぎると一覧の高さが伸びるので、3行までがバランス良。

Q. PC表示も同じカード風にしたい

A. 可能です。PCは表示幅が広いので、2〜3列のグリッド＋影のほうが一覧性が高まります。

Q. QooQ以外でも使える？

A. はい。要は「一覧アイテムの親にGrid（固定列＋可変列）・画像にaspect-ratio・テキスト列をFlexで縦積み」の3点が効けばOK。クラス名だけ置き換えてください。

まとめ

スマホ一覧の肝は左列を固定幅・画像は16:9・右列を縦積みの3点。これだけで視認性・回遊性・CLSが改善し、SEO/AdSenseにもやさしいデザインに仕上がります。今回はCSSだけで実装したので、導入も安全。