記事に載せる画像の大きさ、毎回バラバラになっていませんか？

記事

IT・テクノロジー

soraha design

2026/10/03 18:07

記事を書くたびに、横長・正方形・縦長の画像をそのまま載せていませんか？

画像の形がそろっていないと、文章が読みづらいだけでなく、ページ全体が少し落ち着かない印象になります。

今回は、難しい画像編集をしなくてもできる、WordPressの記事画像をそろえる考え方をご紹介します。

同じ3枚の写真を、同じ記事幅で実際に表示した比較です。左は横長・縦長・正方形が混在した状態、右は並べる写真だけ16:9にそろえた状態です。

━━━━━━━━━━━━━━━━

■ 先に結論

まず表示幅をそろえ、高さは自動にします。

・アイキャッチや横に並べる写真は、必要に応じて縦横比もそろえる

・図解・操作画面・文字入り画像は切り抜かず、内容が欠けないことを優先する

・正方形や縦長の写真は、無理に横へ引き伸ばさない

「横幅」は画像を表示する大きさ、「縦横比」は横と縦の形の比率です。

たとえば、1200×675pxと800×450pxは大きさが違っても、どちらも16:9の横長です。アイキャッチや並べる写真では、同じ形にすると統一して見えます。

━━━━━━━━━━━━━━━━

■ 画像を横へ引き伸ばさない

小さな画像を大きく表示すると、ぼやけたり文字が読みにくくなったりします。

また、横幅と高さを別々に変えると、人物や商品が横に伸びて見えることがあります。

WordPressでは、画像を選んだあとに表示幅を変えられます。基本は横幅だけを調整し、高さは自動のままにしてください。

元の画像より大きく見せるのではなく、必要な表示サイズに近い画像を使う方がきれいです。

━━━━━━━━━━━━━━━━

■ 「リサイズ」と「トリミング」は別の作業

リサイズは、画像全体を保ったまま大きさを変えることです。

トリミングは、見せたい部分を残して周囲を切ることです。

正方形の写真を横長の枠に合わせるとき、横へ伸ばすのではなく、上下を少し切って横長にします。

WordPressの画像ブロックでは、「切り抜き」や「縦横比」から正方形・横長などを選べる場合があります。テーマやWordPressのバージョンによって表示名が違うため、項目がなければ無理に探さなくて大丈夫です。

同じ写真を、同じ320×245pxの枠で実際に描画しています。引き伸ばしは形が変わるため避けます。写真は切り抜き、図解や文字入り画像は全体表示が向いています。

━━━━━━━━━━━━━━━━

■ まずは1種類だけ決める

すべての画像を一度に直す必要はありません。

最初は、記事の先頭に置く画像だけ形を決めると分かりやすいです。たとえば横長のアイキャッチなら1200×675px（16:9）。実際は、使っているテーマの推奨寸法に合わせます。

本文の画像は、次のように役割で分けます。

・写真や図解：記事の本文幅いっぱい

・操作画面：文字が読める大きさ

・2枚並べる画像：同じ縦横比

・縦長画像：無理に2枚並べず、1枚で表示

大切なのは、すべてを同じサイズにすることではありません。同じ役割の画像をそろえることです。

━━━━━━━━━━━━━━━━

■ WordPressで確認する手順

1. 記事内の画像ブロックを選ぶ

2. 画面右上の設定ボタンを押す

3. サイドバーの「ブロック」を開く

4. 歯車アイコンの「設定」を選ぶ

5. 「解像度」で、表示場所に合う元画像サイズを選ぶ

公式WordPress Playgroundの一時検証サイトで、画像ブロックの「解像度」を表示した自前撮影画面です。環境はWordPress 7.1.2・Chrome 154、確認日は2026年10月3日です。画面の「Settings」「Resolution」「Large」は、日本語環境の「設定」「解像度」「大」に対応します。

「解像度」に「フルサイズ」「大」「中」などが表示される場合は、必要以上に大きな元画像を使わず、表示場所に合うものを選びます。これは表示幅とは別の設定です。「大」を選ぶだけで、記事内の画像が同じ大きさになるわけではありません。

操作後は、パソコンとスマートフォンの両方でプレビューしてください。

━━━━━━━━━━━━━━━━