背景写真を変更しても読めるメインビジュアルを作れます。
作業を始める前に
- 変更前の画面と設定値を記録し、戻せる状態で作業します。
- 管理画面の名称や使える機能は、WordPressのバージョン・権限・テーマで異なります。
- 01写真に入れる情報を決める
- 02画像と見出しを配置する
- 03重ねる色と高さを整える
- 04公開画面で切り取りと操作を試す
下の各項目で、判断のポイントと確認方法を説明します。
進め方・判断のポイント 04 STEPS
写真に入れる情報を決める
写真自体に長いコピーを焼き込まず、見出しはブロックの文字として用意します。人物や商品の重要部分と文字が重ならない写真を選びます。カバーは装飾を含む背景として使うため、写真の中にしかない重要情報は本文でも説明します。小さな画面で切り取られても伝わる構図が向いています。
写真と文字の役割を分けました。
画像と見出しを配置する
固定ページに「カバー」を追加し、メディアライブラリから写真を選びます。内側の段落を見出しにする場合は、ページ全体の見出し階層に合わせます。文字の配置と写真の焦点位置は別の設定です。まず文字が読みやすい場所を決め、その後に人物の顔などが切れないよう背景の位置を調整します。
背景と見出しの位置をそれぞれ調整しました。
重ねる色と高さを整える
オーバーレイの色や不透明度を調整し、写真の明るい部分でも文字を読めるか確かめます。全画面の高さにする設定は印象的ですが、スマホで次の内容が見えにくくなる場合があります。見出しが長いときは高さを固定しすぎず、文章が枠からはみ出さない余裕を持たせます。
写真の明暗に左右されずに見出しを読めます。
公開画面で切り取りと操作を試す
PCとスマホで写真の見える範囲を比べ、横向き画面や文字の拡大も試します。ボタンを入れた場合は文字だけでなく枠全体を操作しやすいか確認します。背景動画を使う場合も、音や動きがなくても内容が伝わるようにします。読みづらいときは写真と文章を分ける構成へ戻して構いません。
狭い画面でも写真とボタンが欠けません。
終わったら確認すること
- 背景写真を変更しても読めるメインビジュアルを作れます。
- 変更したページと、そこへつながる一覧・メニューをログアウトした状態で確認します。
途中で困ったときは
画像ブロックとの違いは？
画像そのものを見せるなら画像ブロック、背景に文字やボタンを重ねるならカバーが候補です。すべての写真をカバーにする必要はありません。
写真を差し替えると文字が読みにくくなります。
新しい写真の明るさや主役の位置が変わるためです。焦点位置とオーバーレイを再調整し、モバイルでも確認します。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.30 ／ 読む時間は目安です。操作に必要な時間は環境によって異なります。
管理画面の項目を調べる
入力欄の意味・操作・確認方法を、項目ごとに確認できます。
投稿／固定ページ → 編集 → ブロック →