アイキャッチの文字が一覧で切れるとき｜画像の比率と余白を確認する

※本記事にはプロモーションが含まれています。

アイキャッチを画像単体で開くと読めるのに、記事一覧で文字が切れる場合は、表示枠の比率を先に確認します。元の画像に問題がなくても、一覧へ合わせる切り抜きで端の文字が見えなくなることがあります。

文字そのものが崩れている場合はAIアイキャッチの文字を整える方法、ぼやける場合は画像サイズの確認順が別の切り分けになります。本記事は、正しく作れた文字が枠からはみ出す問題を扱います。

元画像と一覧の枠を別々に見る

まず、アップロードした元画像の縦横サイズを確認します。次に、トップの記事一覧、カテゴリー一覧、関連記事など、切れている場所を記録します。同じアイキャッチでも場所ごとに枠が違う可能性があります。

WordPressが別サイズの画像を作る場合も、テーマが表示時に画像を切り抜く場合もあります。元画像を作り直す前に、どの段階で端が消えたのかを見れば、必要な修正を絞れます。今回、テーマの設定は変更していません。

中央で切り抜くと残る範囲は変わる

説明用に、1200×630ピクセルの画像を、中央を基準に4:3の枠へ余白なく表示する条件を計算しました。高さ630を残すなら、見える幅は630×4÷3＝840です。左右の切り落としはそれぞれ180ピクセルになります。

これは今回作った算術モデルで、WordPressや特定テーマが実際に生成した画像の測定結果ではありません。CSSのobject-fit: coverは、比率を保って枠を満たすために画像の一部が切れる場合があります。実際の切り抜き位置や枠の比率が違えば、見える範囲も変わります。

文字を動かして、実際の一覧で確かめる

1. 文字を入れていない元の背景を残します。
2. 切れている一覧の縦横比を確認します。
3. その比率で中央部分だけ見える仮の枠を用意します。
4. 大事な語句を枠内へ寄せ、長い副題を短くします。
5. 実際の記事一覧とスマホ相当の幅で確認します。

「必ず上下左右に何％あければよい」という共通値で決めるより、利用する枠に合わせて確認する方法です。主題を中央へ寄せても、極端に縦長の枠では全体が入りません。その場合は、表示場所別の画像を用意できるか、テーマの設定を調べます。

画質補正では切れた文字の配置は直らない

文字の位置が枠の外なら、画像を高解像度にしても見える範囲は同じままです。まずは手元の画像編集機能で余白と文字を調整できます。新しい有料ソフトを買う前に、切り抜きと解像度のどちらが原因かを分けるのがよいと思います。

設定の変更が必要な場合は、記事一覧だけでなく関連記事などへの影響も確認します。この例はCSSを本番へ追加する手順ではなく、画像を作る前の確認方法です。

資料確認日：2026年10月28日。参考資料1。