2026年10月8日

WordPressのブロックエディターでカバーブロックを使う方法と設定のコツ

テーマ・デザイン

カバーブロックは、画像・動画・背景色の上に見出しやボタンを重ねて表示するブロックで、トップページのメインビジュアルや記事内の区切りによく使われます。画像を選んで文字を入れるだけで形になりますが、文字の読みやすさ、スマートフォンでの高さ、表示速度で失敗しやすいブロックでもあります。この記事では、基本の作り方から主な設定の意味、つまずきやすい点と確認方法、子テーマでの見た目の調整までを説明します。

カバーブロックを追加する

投稿やページの編集画面で「+」（ブロック挿入ツール）を開き、「カバー」を検索して追加する
背景にするものを選ぶ。メディアライブラリーやアップロードから画像・動画を選ぶか、色の候補から背景色を選ぶ
ブロックの中央にある段落に文字を入れる。中には見出し・段落・ボタンなど、ほかのブロックを自由に入れられる
右側の設定パネルで、オーバーレイ（背景の上にかける色）や高さを調整する

カバーブロックの中身は、ほかのブロックを入れる箱になっています。見出しとボタンを並べたいときは、カバーの中にグループブロックや「横並び」を入れて整えると、余白の調整がしやすくなります。

すでに置いてある画像ブロックを選び、ツールバーの変換メニューから「カバー」に変えることもできます。

主な設定と使いどころ

設定項目の名称や並び順はバージョンによって変わることがあります（2026年10月現在）。ここでは目的別に説明するので、同じ役割の項目を探してください。

オーバーレイの色と不透明度

背景の上にかける色と、その濃さを決めます。写真の上に白い文字を載せるなら、黒や濃い色のオーバーレイを 40〜60% 程度かけると読みやすくなります。不透明度を 0 にすると写真がそのまま見えますが、写真の明るい部分に文字が重なると読めなくなります。グラデーションも選べるので、文字がある側だけを暗くする使い方もできます。

焦点（フォーカルポイント）

画像のどこを中心に見せるかを、プレビュー上の点で指定する機能です。カバーは横長の枠に画像を切り抜いて表示するため、画面幅が変わると見える範囲も変わります。人物の顔や商品が切れないよう、焦点を被写体に合わせておきます。

固定背景と繰り返し背景

固定背景を有効にすると、スクロールしても背景画像が動かず、文字だけが流れる演出になります。ただし iPhone などの iOS の Safari は、この仕組み（CSS の background-attachment: fixed）に対応しておらず、通常の背景として表示されます。スマートフォンで同じ演出にはならない前提で使ってください。また、固定背景にすると画像が CSS の背景として出力されるため、通常の表示で使われるレスポンシブ画像（画面幅に合わせた画像サイズの出し分け）が効かなくなります。

繰り返し背景は、小さな模様の画像をタイル状に並べたいときに使います。写真には向きません。

最小の高さ

カバーの高さを px や vh（画面の高さに対する割合）などで指定します。トップのメインビジュアルを「画面いっぱい」にしたいときは 100vh が候補ですが、スマートフォンではアドレスバーの分だけはみ出したり、文字が多いと中身が収まらなかったりします。中身の量に応じて、70〜80vh 程度やコンテンツに合わせた高さも試してください。

コンテンツの位置

中の文字やボタンを、中央・左上・右下などのどこに置くかを決めます。写真の被写体と文字が重ならない位置を選ぶと、オーバーレイを薄くしても読みやすくなります。

アイキャッチ画像を背景にする

カバーブロックには、投稿のアイキャッチ画像を背景として使う設定があります。ブロックテーマのテンプレート（個別投稿など）に置くと、記事ごとに異なる画像を表示するヘッダーを 1 つのテンプレートで作れます。

つまずきやすい点と確認方法

文字が読みにくい

写真と文字の色のコントラストが足りないのが原因です。WCAG 2.2 の達成基準 1.4.3（レベル AA）では、通常の文字と背景のコントラスト比として 4.5:1 以上が求められています（大きな文字は 3:1 以上）。写真の上の文字は場所によって背景の明るさが変わるため、文字が重なる一番明るい部分で確認します。オーバーレイを濃くする、文字を太く大きくする、文字の位置を暗い部分に移す、の順に試してください。自動のコントラストチェックツールは画像の上の文字を正しく測れないことが多いため、実際の画面で目視の確認も行います。

背景動画の扱い

背景に動画を選ぶと、自動再生・ミュート・ループで再生されます。動きのある表示が 5 秒を超えて続く場合、WCAG 2.2 では利用者が一時停止や停止をできる手段が求められます（達成基準 2.2.2）。また、OS の設定で「視差効果を減らす」などを選んでいる利用者には、動きが負担になることがあります。動画は短く穏やかなものにし、次の CSS のように prefers-reduced-motion で動画を隠し、オーバーレイの色だけを見せる対応も検討してください。

/* 子テーマの style.css などに追加 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover__video-background {
		display: none;
	}
}

動画ファイルは画像より重く、モバイル回線では表示が遅くなります。ファイルサイズを抑え、ファーストビュー以外では使う場面を絞ると安心です。

表示が遅い・レイアウトがずれる

ページの最上部に置いた大きなカバー画像は、表示速度の指標である LCP（最大のコンテンツが表示されるまでの時間）の対象になりやすい要素です。アップロード前に画像を適切な幅（表示幅の 2 倍程度まで）に縮小し、WebP などの軽い形式も検討します。カバーの高さを指定しておくと、画像の読み込み前後で下の要素が動くレイアウトのずれ（CLS）も起きにくくなります。PageSpeed Insights で、該当の画像が LCP 要素として挙がっているかを確認してください。

画像の代替テキスト

カバーの背景画像は、多くの場合は装飾として扱われます。画像そのものに意味がある場合（商品写真など）は、設定パネルに代替テキストの入力欄があれば内容を書き、無ければカバー内の文字で内容を伝えるようにします。

子テーマでカバーの見た目を調整する

すべてのカバーに共通の調整（角丸や内側の余白など）を加えたい場合は、子テーマで CSS を読み込みます。wp_enqueue_block_style() を使うと、カバーブロックがページにあるときだけ CSS を読み込めます。

<?php
// 子テーマの functions.php
add_action( 'init', function () {
	wp_enqueue_block_style( 'core/cover', array(
		'handle' => 'child-cover-style',
		'src'    => get_stylesheet_directory_uri() . '/assets/cover.css',
		'path'   => get_stylesheet_directory() . '/assets/cover.css',
		'ver'    => '1.0.0',
	) );
} );

/* 子テーマの assets/cover.css */
.wp-block-cover {
	border-radius: 12px;
	overflow: hidden;
}

ブロックテーマなら、theme.json の styles.blocks で core/cover の余白などを指定する方法もあります。管理画面のサイトエディターの「スタイル」で変えた内容はデータベースに保存され、theme.json より優先されるので、両方で設定したときは表示がどちらに従っているかを確認してください。

まとめ

カバーブロックは画像・動画・色の上にほかのブロックを重ねる箱。中にグループブロックを入れると配置を整えやすい
オーバーレイの濃さと焦点の位置で、文字の読みやすさと被写体の見え方を調整する
固定背景は iOS の Safari では効かず、レスポンシブ画像も使われなくなる点に注意する
文字のコントラスト、背景動画の動き（prefers-reduced-motion）、LCP 対象としての画像の重さを確認する
共通の見た目は子テーマの CSS（wp_enqueue_block_style()）や theme.json で調整する