WordPressで画像が大きすぎる・はみ出す場合の対処法まとめ

WordPressで記事を書いていると、

といったトラブルに遭遇することがあります。

特に、スマホで撮影した写真をそのままアップロードした場合や、
クライアントに運用をお任せしているサイトでよく起きがちな問題です。

そこで、この記事では、原因ごとに対処法を分けて解説します。
上から順番に確認して、ご自身の状況に合った方法を試してみてください。

まず「どこが原因か」を確認しよう

画像が大きくなる・はみ出す原因は大きく3つに分かれます。

それぞれの確認方法と対処法を順番に解説します。

対処法① CSSで画像の最大幅を制限する【最も手軽】

画像がサイトの横枠からはみ出している場合、
まず試してほしいのがCSSでの対処です。

WordPressのカスタマイザーか、テーマの style.css に以下のCSSを追加します。

img {
    max-width: 100%;
    height: auto;
}

これにより、画像がコンテンツ幅を超えて表示されることがなくなり、
縦横比を保ったまま自動でリサイズされるようになります。

ただし、テーマによっては figure タグや .wp-block-image クラスに
別のスタイルが当たっており、上記だけでは効かない場合もあります。

その場合は以下のCSSも合わせて追加してみてください。

.wp-block-image,
figure {
    max-width: 100%;
    height: auto;
}

対処法② メディア設定で画像の上限サイズを設定する

WordPressには「アップロードした画像を自動でリサイズして保存する」機能があります。
このメディア設定を正しく行っておくだけで、大きすぎる画像のトラブルを事前に防ぐことができます。

設定方法

高さを「0」にすることで、縦横比を維持したままリサイズされます。

👉 この設定は新規アップロードした画像にのみ適用されます。
すでにアップロード済みの画像には反映されないため、
既存画像を修正したい場合は「Regenerate Thumbnails」などのプラグインで再生成が必要です。

対処法③ WordPress 5.3以降の「自動2560px制限」について知っておく

WordPress 5.3以降から、縦横どちらかが2560pxを超える画像をアップロードすると、
自動的に2560pxにリサイズされる仕様になっています。

通常の用途ではむしろ便利な機能ですが、
高解像度の写真をそのまま使いたい場合には不都合になることもあります。

その場合は、functions.php に以下を追記することで解除できます。

// WordPress 5.3以降の2560px自動リサイズを無効化
add_filter( 'big_image_size_threshold', '__return_false' );

※解除すると大きな画像がそのままサーバーに保存されるため、
サーバーの容量やページ表示速度への影響に注意してください。

対処法④ アップロード前に画像を最適化しておく【根本的な解決策】

CSSや設定での対処も大切ですが、
そもそもアップロードする画像を適切なサイズに整えておくことが最も根本的な解決策です。

推奨する画像サイズの目安

特にスマホで撮影した写真はそのままアップロードNGです。
スマホカメラの写真は4,000px以上・数MB以上になることが多く、
サイトの表示速度低下やレイアウト崩れの原因になります。

便利なプラグインで自動圧縮・リサイズする

アップロード前の手間を省きたい場合は、
画像を自動で圧縮・リサイズしてくれるプラグインを使うのが便利です。

まとめ

今回は、WordPressで画像が大きすぎる・はみ出す場合の対処法についてまとめました。

画像トラブルの多くは「アップロード前の最適化」と「メディア設定の見直し」で防げます。
サイト公開前に一度設定を確認しておきましょう。