Bloggerの人気テーマ「QooQ」などを使用している方で、スマホから自分のブログを見たときに「記事一覧が縦に長すぎて、スクロールするのが大変…」と感じたことはありませんか？
本記事では、スマホの記事一覧を、見やすくスッキリとした「横並びのカード風デザイン」に最適化するCSSカスタマイズの実録レポートをお届けします。
サムネイル画像を左、タイトルなどのテキストを右に配置し、「16:9の比率統一」「タイトルを最大3行に制限」「薄い影でカード感アップ」を加えることで、ブログの読みやすさと回遊率（PV）が驚くほど向上します！コピペで簡単に実装できるので、ぜひお試しください。
- 視線移動を最小化： サムネイル左／テキスト右の横並び配置でスッキリ
- ガタつき解消： サムネイルを「16:9」で統一し、一覧の行ズレを防止
- レイアウトの安定： 長いタイトルも「最大3行」で自動的に「…」に省略
- 情報の整理： カテゴリ→日付の順に並べ替え、優先順位を明確化
- AdSense対策： 薄い影で区切り、ポリシーに抵触しない安全なUI設計
最終形：コピペOKの完成CSS（スマホのみ適用）
Blogger管理画面の [テーマ] → [カスタマイズ] → [詳細設定] → [CSSを追加] を開き、以下のコードをそのまま貼り付けて保存してください。
※事前に、以前ご自身で設定したスマホ用一覧のCSS（flex指定など）があれば、競合を防ぐために削除しておいてください。
追加するCSSコード
@media (max-width:768px){
:root{
--thumb-w: 128px; /* サムネイルの幅（120〜140pxで調整可） */
--gap: 12px; /* 画像とテキストの間隔 */
}
/* ▼ 記事リストを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;
}
/* ▼ サムネイルを16:9で固定（CLS・ガタつき対策） */
.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行に制御して「...」で省略 */
.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;
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;
}
.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;
}
}💡 なぜこのデザインがSEO・AdSenseに強いのか？
① CLS（レイアウトシフト）の抑制：
CSS内で aspect-ratio: 16/9; を用いてあらかじめ画像の高さを「予約」しているため、スマホでページを読み込んだ瞬間にガタガタとレイアウトが動くのを防ぎます。これはGoogleのSEO評価指標（コアウェブバイタル）に直結します。
② 情報の走査速度アップ：
タイトルを強制的に3行に絞ることで、スマホの狭い画面でも1画面内に複数の記事が入り、読者が目的の記事をより速く見つけられます（直帰率の低下）。
③ ポリシーへの配慮：
過度な装飾や巨大なリンク化を避け、薄い影でカードを区切るシンプルな設計にしているため、AdSenseの「ナビゲーション誤認（誤クリック誘発）」のリスクを最小化しています。
上記のCSSを入れてもサムネイル画像が変に切り取られてしまう場合、原因はBloggerテンプレートのHTML側にあります。以下の記事で根本から直す方法を解説しています。 ▶︎ Bloggerサムネイルが見切れる原因と解決法｜HTMLの2:1指定を直して16:9で統一する方法
デザイン微調整のガイドライン
ご自身のブログの雰囲気に合わせて、CSSの数値を少し変更するだけで簡単にお好みのデザインに微調整できます。
- サムネイルの幅： コード上部の
--thumb-w: 128px;の数値を120px〜140pxの間で変更してください。 - 影の強さ：
box-shadow: 0 2px 6px rgba(0,0,0,0.08);の末尾の0.08を上げると影が濃くなり、0にすると完全にフラットなデザインになります。 - タイトルの行数：
-webkit-line-clamp: 3;の数字を「2」にするとさらにコンパクトに、「4」にすると長いタイトルも最後まで表示されやすくなります。
スマホ版カードデザインに関するよくある質問（FAQ）
- Q. サムネイル画像の角を少し丸くしたい場合は？
- A. コード内の
.list-item imgにあるborder-radius: 0 !important;の数値を6pxや8pxなどに変更してください。優しい印象のデザインになります。 - Q. パソコン（PC）で見てもこのカード型デザインにしたいです。
- A. コードの一番上と下にある
@media (max-width:768px){ }の囲みを外せばPCでも適用されます。ただし、PCは画面が横に広いため、このCSSのままでは間延びしてしまいます。PCの場合は2カラムや3カラムのグリッドレイアウトを別途設定することをおすすめします。 - Q. QooQ以外のテーマ（Vaster2など）でも使えますか？
- A. はい、応用可能です。ただしテーマによって記事一覧のクラス名（
.list-itemや.list-item-innerなど）が異なる場合があります。ご自身のテーマのHTMLを確認し、CSSのクラス名を適宜書き換えてご使用ください。
当ブログで紹介しているBloggerの必須カスタマイズをひとつの記事にまとめました！デザインの最適化から収益化の基盤作りまで、コピペでできる厳選テクニック8選を完全網羅しています。ブログをさらにパワーアップさせたい方はぜひご覧ください！
まとめ：スマホの視認性アップ＝PV数アップ！
ブログのアクセス数の大半がスマホからの流入である現在、スマホ表示を「横並びのカード型」に整えるだけで、ブログの洗練度は一気に向上し、読者が「次の記事も読んでみようかな」と思う確率（回遊率）が高まります。
読者の利便性（読みやすさ）を第一に考えたデザインで、ブログのファンとPV数をどんどん増やしていきましょう！
