🔄 最終更新日：2026年3月6日
Bloggerの人気テーマ「QooQ」を使用している方で、スマホ表示の「記事一覧」が長すぎて見づらいと感じていませんか？
本記事では、スマホの記事一覧をカード風に最適化する実録レポートをお届けします。サムネイルを左、タイトルを右に配置し、16:9の比率統一・タイトル3行制限・薄い影を加えることで、驚くほど読みやすくなります。
この記事のゴール（Before → After）
- 視線移動を最小化：サムネイル左／テキスト右の横並び配置
- ガタつき解消：サムネイルを16:9で統一し、行ズレを防止
- レイアウトの安定：タイトルを最大3行に制限
- 情報の整理：カテゴリ→日付の順に優先順位を明確化
- AdSense対策：薄い影で区切り、ポリシーに抵触しないシンプルな設計
最終形：コピペOKの完成CSS（スマホのみ適用）
Blogger管理画面の [テーマ] → [カスタマイズ] → [詳細設定] → [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;
}
}適用手順と運用のポイント
- バックアップ：HTML編集画面からテンプレートを保存（基本中の基本です）。
- 旧コードの削除：以前設定したスマホ用一覧CSS（flex指定など）を削除し、競合を防ぎます。
- CSSの追加：上記コードを貼り付け、保存します。
- 表示確認：スマホの実機で、横並びのデザインに崩れがないか確認します。
💡 SEO/AdSenseに強い理由
・CLS（レイアウトシフト）の抑制：aspect-ratioで画像の高さを予約し、読み込み時のズレを防ぎます。
・情報の走査速度：タイトルを3行に絞ることで、読者が目的の記事をより速く見つけられます。
・ポリシー配慮：過度な装飾を避け、AdSenseの「ナビゲーション誤認」リスクを最小化しています。
デザイン微調整のガイドライン
- サムネ幅：120px〜140pxの間でブログの雰囲気に合わせて調整してください。
- 影の強さ：
rgba(0,0,0,0.08)の末尾の数値を上げると影が濃くなり、下げるとよりフラットになります。 - タイトル行数：
-webkit-line-clampを「2」にするとさらにコンパクトに、「4」にすると情報量が増えます。
よくある質問（Q&A）
- Q. 画像の角を丸くしたい場合は？
- A.
.list-item img内のborder-radius: 0 !important;を6pxなどに変更してください。 - Q. PCでもこのカード型を適用したい！
- A.
@mediaの制限を外せば可能ですが、PCは画面が広いため、2カラムや3カラムのグリッドに調整するのがおすすめです。
まとめ
スマホ表示を「横並びカード型」に整えるだけで、ブログの洗練度は一気に向上します。今回のCSSはQooQ以外のテーマでもクラス名を調整すれば応用可能です。 読者の利便性を第一に考えたデザインで、回遊率アップを目指しましょう！
