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

画像の形が違うと、読むリズムもばらつきます

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

一枚ずつ見ると問題がなくても、同じ記事の中で形が何度も変わると、本文の始まる位置も上下します。読者は内容より先に、ページの揺れを感じることがあります。

「横幅」と「縦横比」を分けて考えます

横幅は、画像をどのくらい大きく表示するか。縦横比は、横と縦の形の比率です。

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

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

小さな画像を大きく表示すると、ぼやけたり、画像内の文字が読みにくくなったりします。横幅と高さを別々に変えると、人物や商品が横に伸びて見えることもあります。

WordPress公式の画像ブロック案内でも、横幅を変更し、高さは自動で調整させる方法が基本として案内されています。固定の高さは、画面幅が変わったときに扱いにくくなるためです。

横幅だけを調整し、高さは「自動」のままにしてください。元の画像より大きく見せるのではなく、必要な表示サイズに近い画像を使う方がきれいです。

リサイズとトリミングは別の作業です

リサイズ

画像全体を保ったまま、大きさを変えることです。形は変わりません。

トリミング

見せたい部分を残し、周囲を切ることです。正方形の写真を横長にするときは、横へ伸ばすのではなく、上下を少し切ります。

WordPressの画像ブロックでは、「切り抜き」や「縦横比」から横長・正方形などを選べる場合があります。「Cover」は枠いっぱいに表示する代わりに一部が切れ、「Contain」は画像全体を見せる代わりに余白ができる方式です。

人物の顔や商品の中心がある画像では、切り抜き後に大切な部分が残っているか確認してください。

まずは記事の先頭画像だけ、形を決めましょう

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

• 写真や図解：記事の本文幅いっぱい
• 操作画面：文字が読める大きさ
• 2枚並べる画像：同じ縦横比
• 縦長画像：無理に2枚並べず、1枚で表示

大切なのは、全部を同じサイズにすることではなく、同じ役割の画像をそろえることです。

WordPressで確認する手順

1. 記事内の画像ブロックを選ぶ
2. 画面右上の設定ボタンを押す
3. サイドバーの「ブロック」を開く
4. 歯車アイコンの「設定」を選ぶ
5. 「解像度」で、表示場所に合う元画像サイズを選ぶ

「解像度」に「フルサイズ」「大」「中」などが表示される場合は、表示場所に合うものを選びます。これは表示幅とは別の設定です。「大」を選ぶだけで、記事内の画像が同じ大きさになるわけではありません。項目名や選択肢は、テーマや元画像の大きさによって変わります。

公開前はスマートフォンでも3点確認します

• 画像が画面からはみ出していないか
• 画像内の文字が小さすぎないか
• トリミングで人物の顔や商品の中心が切れていないか

パソコンで2枚横並びでも、スマートフォンでは1列になることがあります。並び方が変わっても内容が伝わるか、プレビューで確認します。

ブロックの「縦横比」は、ページ上の見え方を変える設定です。一方、メディア編集の「切り抜き」は画像自体を編集します。操作前に原本を手元へ残し、迷う場合はブロックの表示設定だけで調整してください。

まとめ

• まず表示幅をそろえ、高さは自動にする
• アイキャッチや並べる写真は、必要に応じて縦横比もそろえる
• 図解・操作画面・文字入り画像は、内容が欠けないことを優先する
• 小さな画像を無理に引き伸ばさない
• 公開前にスマートフォンでも確認する

まずは、次の記事の先頭画像だけでも形を決めてみてください。そこまで整えば、ご自身で対応して大丈夫です。

参考：WordPress.org「Image block」（画像のサイズ変更、縦横比、切り抜き、解像度）