記事一覧や記事ページにアイキャッチ画像を出すときは、ブロックエディターのコアブロック「アイキャッチ画像」（英語名 Featured Image、ブロック名 core/post-featured-image）を使います。この記事では、このブロックの置き場所と動き方、リンク・縦横比・サイズ・オーバーレイの設定、表示速度とレイアウトのずれを抑える考え方、アイキャッチ未設定の記事への対処、画像が出ないときの確認までを説明します。
設定項目の名前や配置は WordPress のバージョンや翻訳で変わることがあります。本文は（2026年10月現在）の一般的な日本語表示を基準にしているので、近い名前の項目に読み替えてください。
このブロックが表示するもの
「アイキャッチ画像」ブロックは、画像を自分で選ぶブロックではありません。そのブロックが置かれた場所の「投稿」に設定されているアイキャッチ画像を、自動で取り出して表示します。
- クエリーループの「投稿テンプレート」の中: 一覧の1件ごとに、その記事のアイキャッチが出る
- 個別投稿のテンプレート（ブロックテーマの「単一投稿」など）: いま表示している記事のアイキャッチが出る
- 投稿の本文の中: その投稿自身のアイキャッチが出る
アイキャッチ画像そのものは、投稿の編集画面の設定サイドバーにある「アイキャッチ画像」欄で記事ごとに設定します。好きな画像を1枚貼りたいだけなら、このブロックではなく「画像」ブロックを使います。
使える条件
テーマがアイキャッチ画像に対応している必要があります。ブロックテーマでは通常対応済みです。クラシックテーマで投稿の編集画面にアイキャッチ欄が出ない場合は、テーマ側で次の宣言が必要です。
<?php
// 子テーマの functions.php に追記する例
add_action( 'after_setup_theme', function () {
add_theme_support( 'post-thumbnails' );
} );ただし、クラシックテーマでは記事一覧や記事ページの画像はテーマのPHPテンプレート（the_post_thumbnail() など）が出力しています。このブロックを使えるのは、本文やブロックウィジェットのエリア、本文に置いたクエリーループの中に限られます。テーマのテンプレートを丸ごと置き換えるものではありません。
置き方
ブロックテーマで記事一覧にアイキャッチを出す場合の流れです。
- 「外観」→「エディター」でサイトエディターを開き、ブログのホームやアーカイブのテンプレートを開きます。
- クエリーループの中の「投稿テンプレート」を選びます。
- タイトルの上など、出したい位置に「＋」から「アイキャッチ画像」を挿入します。
投稿テンプレートは1件分の型なので、1か所に置けば一覧のすべての記事に同じ形で反映されます。編集画面ではプレビューとして実際の記事の画像が出ますが、アイキャッチ未設定の記事は空の枠で表示されます。
主な設定項目
ブロックを選んで設定サイドバーを開くと、主に次の項目があります。
投稿へのリンク
オンにすると、画像をクリックしたときにその記事へ移動します。一覧ではタイトルと同じリンク先になるため、オンにしておくとクリックできる範囲が広がり、スマートフォンで押しやすくなります。新しいタブで開く設定もありますが、記事一覧から記事に移るだけなら同じタブのほうが閲覧者の予想に沿います。
縦横比
「16:9」「4:3」「1:1」などから選べます。記事ごとにアイキャッチの縦横がばらばらでも、一覧では同じ比率の枠にそろえて表示できるので、グリッド表示が整います。
比率を指定すると、画像のはみ出す部分をどう扱うかを「拡大縮小」（カバー・含む など）で選べます。カバーは枠いっぱいに表示して端を切り取り、含むは画像全体を枠に収めて余白を残します。人物の顔や文字入りの画像を使っているなら、切り取られる位置を数件確認してください。
幅・高さ
数値で指定できます。縦横比と高さを両方指定すると意図どおりにならないことがあるので、一覧では「縦横比だけ」を指定し、幅は親要素に合わせるほうが崩れにくいです。
解像度（画像サイズ）
サムネイル・中・大・フルサイズなど、どの大きさの画像ファイルを使うかを選べます。一覧の小さな枠にフルサイズの画像を使うと、表示は同じでもデータ量が増え、ページが重くなります。表示する枠の大きさに近いサイズを選びます。
オーバーレイ
画像の上に色やグラデーションを重ね、不透明度を調整できます。画像の上に文字を重ねるデザインで、文字を読みやすくするときに使います。
表示速度とレイアウトのずれ
アイキャッチは記事一覧でいちばん大きなデータになりやすい要素です。次の点を意識すると、表示速度と見た目の安定に効きます。
- 縦横比を指定する: 画像の読み込み前から枠の大きさが決まるため、読み込み後に下の文章が押し下げられる「レイアウトのずれ」（CLS）を抑えられます。
- 適切な解像度を選ぶ: WordPress は複数サイズの画像を
srcsetとして出力し、ブラウザが画面に合うものを選びます。元のサイズ指定が大きすぎると、その選択の幅が狭まります。 - 遅延読み込みはコアに任せる: WordPress は画像に
loading="lazy"などの属性を自動で付け、ページ上部の画像には遅延読み込みを付けないよう調整しています。プラグインで遅延読み込みを重ねがけすると、ページ上部の画像まで遅れて表示されることがあるので、設定の重複を確認してください。
アイキャッチ未設定の記事への対処
アイキャッチ画像が設定されていない記事では、公開ページでこのブロックは何も出力しません。一覧のグリッドで画像のある記事とない記事が混ざると、高さがそろわず見た目が乱れます。
いちばん確実なのは、記事ごとにアイキャッチを設定する運用にすることです。過去記事が多くてすぐに対応できない場合は、ブロックの出力にかかる render_block_core/post-featured-image フィルター（render_block_{ブロック名} の動的フック）で、空のときだけ代わりの画像を出す方法があります。
子テーマの functions.php か wp-content/mu-plugins/ のプラグインに書きます。編集前にバックアップを取り、ステージング環境で確認してください。
<?php
/**
* アイキャッチ画像ブロックの出力が空のとき、代わりの画像を表示する。
* 代替画像はメディアライブラリに登録し、その添付ファイルIDを指定する。
*/
add_filter( 'render_block_core/post-featured-image', function ( $block_content, $block ) {
if ( '' !== trim( $block_content ) ) {
return $block_content; // アイキャッチがある記事はそのまま
}
$fallback_id = 123; // 代替画像の添付ファイルID（自分のサイトの値に変更）
$image = wp_get_attachment_image( $fallback_id, 'medium_large', false, array(
'alt' => '',
) );
if ( ! $image ) {
return $block_content;
}
return '<figure class="wp-block-post-featured-image">' . $image . '</figure>';
}, 10, 2 );wp_get_attachment_image() を使うと、srcset や遅延読み込みの属性がコアの仕組みで付きます。代替画像は記事の内容を表すものではないため、alt は空にして装飾画像として扱っています。リンクや縦横比の設定はこの代替出力には反映されないため、必要に応じてCSSで比率をそろえてください。
画像が表示されないときの確認
- 記事にアイキャッチが設定されているか: 投稿の編集画面の設定サイドバーで確認します。本文に画像を貼っただけではアイキャッチにはなりません。
- ブロックの置き場所: クエリーループの「投稿テンプレート」の外に置くと、一覧の各記事ではなく、そのページ自体のアイキャッチを探しにいきます。
- テーマの対応: クラシックテーマでアイキャッチ欄そのものがない場合は
add_theme_support( 'post-thumbnails' )を確認します。 - 画像ファイルの状態: メディアライブラリで画像が削除されていないか、サムネイルが生成されているかを確認します。サイズ違いの画像が足りない場合は、サムネイルの再生成で直ることがあります。
- キャッシュ: ページキャッシュや画像最適化プラグインのキャッシュを削除して確かめます。
まとめ
- 「アイキャッチ画像」ブロックは、置かれた場所の投稿に設定されたアイキャッチを自動で表示するブロックです。好きな画像を貼るなら「画像」ブロックを使います。
- 記事一覧ではクエリーループの「投稿テンプレート」の中に置きます。
- リンク・縦横比・解像度・オーバーレイを設定でき、縦横比の指定と適切な解像度が表示速度とレイアウトの安定に役立ちます。
- 未設定の記事は何も出ないため、運用で設定するか、
render_block_core/post-featured-imageフィルターで代替画像を出します。