Hara Daizo 
WordPressのアイキャッチ画像に、すべてのテーマで共通する最適サイズはありません。記事上部、一覧カード、OGP画像では表示枠が異なり、テーマが切り抜く比率も違うためです。
まず使用中テーマの表示寸法と比率を調べ、SNS用の要件も加えて元画像を決めます。設定・変更の操作から、ぼやけや意図しないトリミングへの対処まで具体的に説明します。
WordPressのアイキャッチ画像とは
アイキャッチ画像は、投稿・固定ページなどを代表する画像として登録するメディアです。テーマは記事上部、投稿一覧、関連記事など任意の場所へ表示でき、SEO・SNSプラグインはOGP画像の候補として利用することがあります。
本文へ置いた最初の画像と、アイキャッチ画像は別の設定です。同じファイルを使うことはできますが、本文画像を削除してもアイキャッチの関連付けが必ず消えるわけではありません。逆に、本文へ画像を挿入しただけでは自動でアイキャッチになるとは限りません。
WordPressアイキャッチ画像のサイズを決める方法
先にサイト内で最も大きく表示される枠を調べます。ブラウザーの開発者ツールでPCとモバイルの表示幅を確認し、テーマの説明に推奨寸法があれば優先します。「画像の挿入とサイズ最適化」で扱う本文画像とは用途を分けて考えます。
決定の流れは次のとおりです。
- 記事上部、一覧、関連記事で表示される比率を確認する
- 最大表示幅と高密度画面に必要な解像度を見積もる
- OGPにも使うならSNSのプレビュー要件を加える
- 重要な被写体や文字を中央寄りの安全領域へ置く
- 画質を保てる範囲で圧縮し、検証投稿で各表示を試す
一つの画像を複数の比率で切り抜くテーマでは、端へロゴや文字を置かない構図が安全です。比率を統一できない場合は、テーマやOGPプラグインで用途別画像を設定できるか調べます。
アイキャッチ画像の比率・ピクセル・容量・形式
ピクセル数は画像が持つ情報量、CSS上の幅は画面での表示寸法です。表示幅600pxの枠に600px未満の元画像を拡大すればぼやけやすく、極端に大きい元画像を毎回配信すれば転送量が増えます。
横長のOGPを兼ねる場合、1200×630px付近の1.91:1はよく使われる出発点ですが、テーマの一覧が16:9や3:2なら必ず一致しません。テーマ表示を主にするかSNSを主にするかを決め、両方のプレビューを見ます。
写真はJPEGやWebP、透過や単純な図はPNGなど、内容に合う形式を選びます。WebPの変換方法は「WebPで画像を軽量化」で確認できます。容量は一律の上限値を目標にするのではなく、ページ速度と画質を見ながら圧縮します。
使用中テーマの推奨サイズを確認する
テーマの公式マニュアルで「featured image」「post thumbnail」「OGP」などの項目を調べます。数値が書かれていない場合は、実際に表示された画像要素の寸法と、読み込まれたファイルURL・srcsetを開発者ツールで確認します。
記事上部と一覧カードで別サイズを生成するテーマもあります。子テーマやプラグインがadd_image_size()で独自サイズを追加している場合、管理画面のメディア設定だけでは全種類を確認できません。テーマ変更を予定しているなら、新テーマの比率で過去画像がどう切り抜かれるかをステージング環境で試します。
アイキャッチ画像を設定・変更・削除する方法
ブロックエディターでは右側の「投稿」設定を開き、「アイキャッチ画像」からメディアを選択またはアップロードします。最近のエディターでは画像ブロックのメニューからアイキャッチへ設定できる場合もあります。
変更時はアイキャッチ欄の画像をクリックして別画像を選び、削除時は「アイキャッチ画像を削除」を使います。投稿との関連付けを外す操作なので、メディアライブラリの元ファイルまで削除するかは別に判断してください。同じ画像を別記事やOGPで使っている可能性があります。
アップロード前に分かりやすいファイル名を付け、必要な代替テキストを設定します。画像自体に長い見出し文字を焼き込む場合は、小さい一覧で読めるか、切り抜かれても意味が残るかを確認します。
アイキャッチ画像のトリミング・生成サイズを調整する
WordPressはアップロード時にサムネイル、中、大などの中間画像を作り、テーマも独自サイズを追加できます。ハードクロップが有効なサイズでは指定比率に合わせて端が切られ、ソフトクロップでは縦横比を維持して指定範囲に縮小されます。
メディア設定の数値を変えても、既存画像の中間ファイルは自動で作り直されません。過去分へ適用する場合は、バックアップ後に信頼できる再生成ツールを検証環境で使います。大量画像の再生成はCPUとディスクを消費するため、実行時間と空き容量を確認します。
特定の被写体を残したい場合は、画像ブロックやカバーブロックの焦点位置、テーマ独自のトリミング設定を使えるか確認します。元画像そのものを編集する方法と、表示時の切り抜きを変える方法を区別してください。
SNSでアイキャッチ画像が正しく表示されるか確認する
投稿ページのHTMLにog:imageなどのメタ情報が出ているか確認し、各SNSが提供する共有プレビューやデバッガーでURLをテストします。アイキャッチを変更しても古い画像が出る場合は、WordPressのページキャッシュに加え、SNS側が以前のOGP情報を保持していることがあります。
SNSごとに切り抜きや表示位置が違うため、ロゴ、人物の顔、短い文字は中央付近へ置きます。ページごとのOGP画像を別指定できるプラグインを使うなら、アイキャッチ未設定時の代替画像と重複設定の優先順位も確認します。
見やすく軽いアイキャッチ画像を作るポイント
一覧で判別できる主題を一つに絞り、背景とのコントラストを確保します。画像内文字は記事タイトルをそのまま長く繰り返さず、小さい表示でも読める量にします。装飾を毎回変えるより、比率、余白、文字位置のルールをそろえると一覧が安定します。
書き出し時は実際の表示に必要なピクセル数へ縮小し、写真の品質を目視しながら圧縮します。位置情報など不要なメタデータも削除を検討します。公開後にネットワーク欄で転送サイズを見れば、編集用の巨大な元ファイルを配信していないか確認できます。
アイキャッチ画像をWebPで軽量化する方法や既存画像の変換・配信確認は、次の記事で詳しく解説しています。
アイキャッチ画像が表示されない・ぼやける場合
表示されないときは、投稿に画像が関連付けられているか、テーマがその投稿タイプでアイキャッチを出す設計か、テンプレートに投稿のアイキャッチブロックがあるかを確認します。クラシックテーマではテーマ側がpost-thumbnailsをサポートしていないと編集欄自体が出ない場合があります。
ぼやける場合は、表示枠より小さい中間サイズを引き伸ばしていないかを開発者ツールで見ます。元画像が十分でも、以前のテーマで作られた小さい生成画像を使っていることがあります。比率が崩れる場合は、CSSで幅と高さを同時に固定していないか、object-fitと焦点位置が適切かを調べます。
よくある質問
いいえ。1200pxはOGPを意識した候補にはなりますが、テーマの最大表示幅、比率、切り抜き方法は異なります。実際のテンプレートとSNSプレビューで決めます。
画像が内容を伝えるなら、文脈に合う簡潔な代替テキストを設定します。周囲の見出しと完全に重複する装飾画像なら空のaltが適切な場合もあり、テーマの出力も確認が必要です。
表示設定の変更と中間画像の再生成で対応できる場合があります。ただし、元画像が小さいものは高画質化できず、構図も自動では直せません。バックアップ後に少数で試してから全体へ適用します。
まとめ
WordPressのアイキャッチ画像は、テーマの表示枠、OGP、比率、解像度、容量を見てサイズを決めます。横1200pxなどの一律ルールだけに頼らず、記事上部・一覧・SNSで実画像を確認しましょう。重要要素を切り抜かれにくい位置へ置き、適切な形式と圧縮を選び、テーマ変更時には生成サイズと過去画像も再検証することが大切です。