---
title: "Astroブログのサムネイル余白を目立たせないメモ"
description: "記事カードの画像をobject-containで見切れないようにしたあと、余白の背景色が目立ちすぎたため、白系の面と薄い境界線に戻した短いUI調整メモ。"
lang: "ja"
canonical: "https://llm-lab.dev/posts/astro-thumbnail-contain-note/"
source: "https://llm-lab.dev/posts/astro-thumbnail-contain-note.md"
publishedAt: "2026-04-17"
updatedAt: "2026-04-17"
category: "技術メモ"
tags:
  - "astro"
  - "tailwind"
  - "ui"
  - "blog"
---

# Astroブログのサムネイル余白を目立たせないメモ

> [!NOTE]
> この記事で確認したこと
>
> 今回は、記事カードのサムネイルを `object-cover` から `object-contain` 寄りに変えたとき、画像の余白がUI上でどう見えるかを確認しました。
>
> 分かったことは、`contain` 表示で生まれる余白は装飾ではなく画像比率の差分として扱った方がよいという点です。画像を見切れさせずに表示する場合は、余白を白系の面と薄い境界線で静かに扱うと、カード全体が落ち着きます。

ブログの記事カードで、横長のサムネイルが見切れる問題を直すために `object-cover` から `object-contain` 寄りの表示へ調整しました。画像全体が見えるようになった一方で、今度は画像の上下または左右に出る余白が妙に目立つようになりました。

最初は余白に少し色を付ければ、カードのデザインとしてまとまると思っていました。ただ、記事一覧で並べて見ると、余白の色が画像よりも先に目に入ります。特に淡い水色系の背景は、情報を整理するための面というより、装飾として主張してしまいました。

結局、サムネイル枠の背景は白系に寄せ、区切りは薄い `border` だけにしました。見切れ防止は `object-contain` で維持しつつ、余白はできるだけ存在感を消す方針です。

この調整で学んだのは、`contain` 表示の余白は「デザインの余白」ではなく「画像比率の差分」として扱った方がよいということです。そこに色を付けると、画像の一部ではない領域がカード内で別の情報のように見えてしまいます。

小さな変更ですが、記事一覧の印象はかなり変わります。ブログのカードUIでは、画像を全部見せることと、余白を装飾しすぎないことをセットで考えた方がよさそうです。