アイキャッチ画像の大きさガタガタ問題を解決する【Luxeritas編】

2025年5月12日

1 はじめに
2 問題の事象
3 対応策　＜暫定版＞

はじめに

いつもブログをご覧いただきありがとうございます。

ミジンコに転生したIPUSIRONです😀

IPUSIRONのプロフィールを見る

見た目の問題に過ぎなかったので放置していましたが、ようやく重い腰を上げた次第です。

問題の事象

Luxeritasが原因なのかどうかは不明ですが、いつ頃（2024年後半？）からか、当ブログのトップページにおける各記事のアイキャッチ画像（サムネイル画像）の大きさがバラバラになる現象が発生していました。

これはPCのようにウィンドウで表示される現象であり、あえてウィンドウを小さくしたり、スマホのブラウザーからアクセスしたりすると、問題なくサムネイル画像が揃って正しく表示されていました。

対応策　＜暫定版＞

こちらが用意したCSSコードを強制的に適用させる方法を採用します。

1：WordPressのダッシュボードにアクセスします。

2：「外観」＞「カスタマイズ」を選びます。

3：「追加CSS」を選びます。

4：以下のCSSコードを入力して、[公開]ボタンを押して適用させます。

設定が反映されると[公開済み]となります。

※[公開]ボタンを押さなくても、右側のプレビュー画面で確認できます。

.entry-thumbnail,
img.wp-post-image {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* スマホ（600px以下）対応. */
@media (max-width: 600px) {
  .entry-thumbnail,
  img.wp-post-image {
    box-sizing: border-box !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100px !important;
    height: 100px !important;
  }
}