CreaTools LogoCreaTools
Tech Notes
Tips

WordPressアイキャッチ画像の縦伸びを直す前に確認すること

2025-10-05

この記事が解決する状況

あなたの状況読むべきセクション
アイキャッチが縦に伸びている原因パターンフローチャート
「srcset 無効化」でググってきた対処の優先順位
CSSで直したが別の問題が出た正解が複数ある理由
PageSpeedスコアを落としたくないsrcset無効化の代償

「srcset 無効化」を検索してここに来た人へ：それは最終手段。まず原因を特定してからにしよう。

よくある失敗

「srcsetを無効化したら縦伸びは直ったが、モバイルで画像が重くなった」

srcsetはレスポンシブ画像のための仕組み。無効化すると、全デバイスで最大サイズの画像を読み込む。

原因を特定せずに無効化すると、別の問題が発生する。

原因パターンフローチャート

画像が縦伸びしている
    ↓
DevToolsで画像を確認
    ↓
imgタグにwidth/heightが指定されている？
    ↓ Yes
CSSでheight:autoが効いていない → CSS修正（対処1）
    ↓ No
imgタグのwidth/heightがない → CLS対策不足、CSS修正（対処1）
    ↓
CSS修正で直らない
    ↓
Networkタブで読み込まれた画像を確認
    ↓
元画像とアスペクト比が違う画像が読み込まれている？
    ↓ Yes
srcsetで意図しないサイズが選ばれている → 対処2: 画像サイズ設定
    ↓ No
テーマのテンプレートで固定サイズが指定されている → 対処3: テーマ修正

正解が複数ある理由

縦伸びの原因は1つではない。

原因正しい対処間違った対処
CSSの指定ミスCSS修正srcset無効化
テーマの固定サイズテーマ修正srcset無効化
画像サイズ設定の不整合サイズ設定見直しsrcset無効化
srcsetで意図しない画像が選ばれるアイキャッチのみsrcset無効化全サイトsrcset無効化

「srcset無効化」は全てのケースで使えるが、代償が大きい。

縦伸びの原因を切り分ける

原因確認方法対処
CSSの指定ミスDevToolsでwidthとheightを確認CSS修正
テーマの固定サイズ指定テーマのソースを確認テーマ修正またはCSS上書き
srcsetで異なるアスペクト比の画像が選ばれているDevToolsのNetworkで読み込まれた画像を確認画像サイズ設定の見直し

まずDevToolsで「何が起きているか」を確認。

対処の優先順位

1. CSSで直るか試す（推奨）
2. テーマ側の画像サイズ設定を見直す
3. アイキャッチのみsrcset無効化
4. srcset完全無効化（最終手段）

対処1: CSSで直す（推奨）

ほとんどのケースはこれで解決する。

.post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
プロパティ役割
width: 100%コンテナに合わせる
height: autoアスペクト比を維持
object-fit: coverはみ出し部分をトリミング

固定サイズのコンテナに収めたい場合

.post-thumbnail {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratioを使う方法（モダン）

.post-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

IE11非対応だが、2025年現在は気にしなくて良い。

対処2: 画像サイズ設定の見直し

WordPressは複数サイズの画像を自動生成する。アスペクト比が揃っていないと問題が起きる。

設定 → メディア で確認:

サイズ推奨設定
サムネイル幅・高さを固定、トリミングON
中サイズ幅のみ指定、高さ0（比率維持）
大サイズ幅のみ指定、高さ0（比率維持）

既存画像の再生成

設定変更後は「Regenerate Thumbnails」プラグインで再生成。

⚠️ 注意: 画像が多いサイトでは時間がかかる。本番で実行する場合は低負荷時に。

対処3: アイキャッチのみsrcset無効化

CSSで解決しない場合。他の画像には影響しない。

// functions.php
add_filter('wp_calculate_image_srcset', function($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    if (get_post_thumbnail_id() === $attachment_id) {
        return false;
    }
    return $sources;
}, 10, 5);

対処4: srcset完全無効化（最終手段）

// functions.php
add_filter('wp_calculate_image_srcset_meta', '__return_null');

srcset無効化の代償

影響具体的な数値
モバイルでの画像サイズ最大5〜10倍に増加
PageSpeed Insightsの「適切なサイズの画像」警告が出る
LCP（Largest Contentful Paint）悪化する可能性
ユーザーのデータ通信量増加

本当に最後の手段。

PageSpeed Insightsとの関係

srcsetが正常に動いている場合

「適切なサイズの画像」: 合格
LCP: 画面サイズに応じた最適な画像が読み込まれる

srcsetを無効化した場合

「適切なサイズの画像」: 警告
「画像を圧縮しましょう」: 警告
LCP: 大きな画像を読み込むため悪化

確認方法

  1. PageSpeed Insights で対象ページを分析
  2. 「適切なサイズの画像」セクションを確認
  3. 「リソースサイズ」と「表示サイズ」の差を確認

差が大きい = srcsetが効いていない or 無効化されている

srcsetの仕組み（理解用）

WordPress 4.4以降、画像にsrcsetとsizesが自動付与される。

<img src="image-300x200.jpg"
     srcset="image-300x200.jpg 300w,
             image-768x512.jpg 768w,
             image-1024x683.jpg 1024w"
     sizes="(max-width: 300px) 100vw, 300px">

ブラウザが画面サイズに応じて最適な画像を選ぶ。これ自体は良い仕組み。

問題は、選ばれた画像のアスペクト比がCSS指定と合わない場合に縦伸びする。

テーマ別の注意点

Cocoon

Cocoon設定 → 画像 で `Retinaディスプレイ対応」がONだと、意図しない画像サイズが選ばれることがある。OFFにして確認。

SWELL

SWELL設定 → エディター設定 → 画像サイズ で設定を確認。デフォルトで最適化されているが、カスタマイズで崩れることがある。

独自テーマ

the_post_thumbnail() の第2引数でサイズ指定を確認:

// 正しい
the_post_thumbnail('large');

// 問題になりやすい
the_post_thumbnail(array(400, 300)); // 固定サイズ指定

まとめ

  • まずCSSのobject-fit: coverで試す
  • srcset無効化はレスポンシブ画像の恩恵を失う
  • アイキャッチだけ無効化する方法もある
  • 完全無効化はPageSpeedスコアに悪影響
  • 原因を特定してから対処する

関連記事