.webp)
WordPressのカバーブロックは、画像や色の上に見出し・文章・ボタンを重ねて表示する機能です。記事の冒頭やサービス案内を目立たせられますが、文字色と背景が近いと読みにくく、スマートフォンでは文字が画像からはみ出すことがあります。この記事では追加、文字入れ、暗さ・高さの調整、解除方法まで説明します。
カバーブロックとは
カバーブロックは、背景に画像・動画・色を置き、その上へ見出しや段落などを重ねるブロックです。アイキャッチ画像は記事一覧や記事上部の代表画像として使われますが、カバーブロックは本文中のレイアウトとして挿入します。
見出しだけでなく、説明文やボタンも内側へ追加できます。サービス紹介、カテゴリーへの案内、記事内の重要な区切りに使えます。ただし多用すると本文の流れが途切れるため、一つの記事で本当に目立たせたい場所へ絞ります。
画像を使ったカバーを追加する手順
- 投稿または固定ページの編集画面を開きます。
- カバーを置きたい場所の「＋」を押します。
- 検索欄へ「カバー」と入力します。
- 「カバー」ブロックを選びます。
- 「アップロード」または「メディアライブラリ」を押します。
- 背景に使う画像を選びます。
- 中央の入力欄へ見出し文を入力します。
- 右上の「下書き保存」を押します。
画像は横長を基本にし、重要な人物や文字が端へ寄りすぎていないものを選びます。スマートフォンでは左右が切り取られる場合があるため、主役が中央付近にある画像が扱いやすいです。
背景画像の上へ文章とボタンを追加する
カバー内の見出しを選び、Enterキーで段落を増やすか、内側に表示される「＋」から段落を追加します。ボタンを置く場合も、カバーの内側の「＋」からボタンブロックを選び、文言とリンク先を設定します。
文章を長くしすぎると画像が見えにくく、スマホでカバーが縦に伸びます。見出しは要点を一つ、説明は1〜2文、ボタンは主要な行動一つを目安にします。詳細はカバーの下へ通常の段落で続けてください。
親のカバーブロックを選ぶ方法
見出しをクリックした状態では、文字の設定しか表示されません。背景画像、暗さ、高さ、焦点位置を変えるには、親のカバーブロックを選ぶ必要があります。左上のリスト表示を開き、見出しや段落の一段上にある「カバー」を選びます。
正しく選ぶと、青い枠が背景画像を含む全体を囲みます。ツールバーの「親ブロックを選択」から移ることもできますが、複数のブロックが重なる場合はリスト表示が確実です。
画像の暗さを変えたいのに、文字サイズしか出なくて迷っていました。
今は見出しだけを選んでいたということですね。
その状態です。
リスト表示で親の「カバー」を選ぶと、背景やオーバーレイの設定が表示されます。
青い枠が写真全体を囲んだら、親を選べた合図なんですね。
設定が見つからないときは、先に階層を確認してみます！
それで大丈夫です。
親を選べたら、文字が読めるところまで背景の暗さを調整しましょう。
オーバーレイで文字を読みやすくする
オーバーレイは、背景画像の上へ半透明の色を重ねる設定です。親のカバーを選び、右側の「スタイル」や「色」からオーバーレイ色を選びます。「不透明度」または「暗さ」の数値を上げるほど、背景画像は見えにくくなり、明るい文字を読みやすくできます。
写真の明暗にばらつきがある場合、文字の後ろだけ明るくなって読めないことがあります。数値を少しずつ上げ、見出し・説明・ボタンのすべてを確認します。画像を見せることより、情報を読めることを優先してください。
文字色と配置を調整する
内側の見出しや段落を選び、文字色を設定します。背景を暗くした場合は白などの明るい文字、背景を明るく保つ場合は濃い文字を使います。見出しだけでなく、小さい説明文とリンクも読みやすいか確認します。
親のカバーでは、内側コンテンツの位置を上・中央・下、左・中央・右などへ変更できます。被写体の顔と文字が重ならない位置を選びます。配置を右へ寄せすぎるとスマホで窮屈になるため、モバイル表示も同時に見ます。
カバーの高さを変更する
親のカバーを選び、右側の「寸法」や「最小の高さ」から高さを調整します。数値を大きくすると画像を広く見せられますが、読者が本文へ進むまでのスクロール量も増えます。記事中の案内なら、内容が収まる必要最小限の高さにします。
ピクセルで固定する場合は、パソコンだけを見て極端に大きな値へしないでください。内側の文章量が増えたときは固定高さの中へ収まらず、重なったり切れたりすることがあります。まず初期値で作り、必要な場合だけ変更します。
画像の焦点位置を決める
カバー画像は画面幅に合わせて一部が切り取られます。親のカバーを選び、「焦点ピッカー」や「焦点」の設定を開き、残したい人物や物へ印を合わせます。主役が中央から外れている画像では特に重要です。
焦点を設定しても、すべての端末で同じ範囲が見えるわけではありません。パソコン、タブレット、スマートフォンのプレビューを切り替え、顔や商品が不自然に切れていないか確認します。
固定背景は必要な場合だけ使う
「固定背景」を有効にすると、スクロール時に背景画像がその場へ残るような効果になります。見た目に動きが出ますが、端末やブラウザによって挙動が異なり、スマートフォンでは無効になることがあります。
記事の理解に必要な機能ではないため、初心者は無理に有効にしなくて構いません。使う場合は本文が読みにくくならないか、スクロールが重く感じないかを複数端末で確認します。
スマートフォン表示の確認手順
- 編集画面右上のプレビューを押します。
- モバイル表示を選びます。
- 重要な被写体が切れていないか確認します。
- 見出しが1文字ずつ折り返していないか見ます。
- 文章やボタンがカバーの外へ出ていないか確認します。
- ボタンを実際に押し、正しいリンク先を開きます。
- 横方向へ画面が動かないか確認します。
編集画面のプレビューは目安です。保存後は公開URLを実際のスマートフォンで開き、ヘッダーや広告を含む状態で上から下まで読みます。
カバーを通常の画像へ置き換える
文字を重ねる必要がなくなった場合は、内側の文章を別の段落としてカバーの外へ移し、カバーを画像ブロックへ置き換える方法があります。ツールバーの変換メニューに画像への変換があれば選びます。
変換候補がない場合は、同じ画像をメディアライブラリから通常の画像ブロックとして追加し、代替テキストを確認してから古いカバーを削除します。削除直後に間違いへ気づいたら「元に戻す」を押します。
カバーが崩れたときの確認
文字が見えない
オーバーレイの不透明度を上げるか、文字色を背景と反対の明るさへ変更します。文字へ影を足す前に、基本の色で読める状態を作ります。
画像の大切な部分が切れる
焦点位置を主役へ合わせます。それでも合わない場合は、余白のある別画像を選びます。
スマホで内容がはみ出す
固定高さを解除し、文章量とボタン数を減らします。左右の余白を大きく設定している場合は初期値へ戻します。
編集した内容が公開画面へ出ない
右上の更新を押したか確認し、公開URLを再読み込みします。別ブラウザで開き、古いキャッシュとの違いを切り分けます。
写真をきれいに見せることばかり考えていましたが、文字を読めることが先なんですね。
焦点位置まで確認すれば、スマホで顔が切れる失敗も減らせそうです！
そのとおりです。
画像、文字、リンクが一つの案内として機能することを完成条件にしましょう。
最初は初期の高さで作って、暗さと文字色を整えてから端末ごとに確認します。
崩れたら固定高さや余白を戻せば、落ち着いて直せますね！
大丈夫です。
装飾を足す前に、読者が内容を理解してボタンを押せるかを確認してください。
WordPressをこれから始める方へ
カバーブロックを使ったページ作成には、WordPressを動かす環境が必要です。これから新しいサイトを用意する方や、現在の管理環境を見直したい方は、WordPress導入機能があるサーバーを候補にできます。すでに現在の環境で安定して運用できている方は、この記事を理由に乗り換える必要はありません。
エックスサーバー
WordPressクイックスタートに対応し、契約とWordPress設定をまとめて進められます。料金、契約期間、キャンペーンの条件は公式ページで最新情報を確認してください。
エックスサーバーの公式ページを確認するまとめ
カバーブロックは、画像や色の上へ見出し・文章・ボタンを重ねる機能です。背景を選び、親のカバーでオーバーレイ、高さ、焦点位置を調整し、内側で文字とリンクを設定します。公開前にはパソコンとスマホで文字、画像の切れ、ボタン、横幅を確認してください。
よくある質問
カバー画像はアイキャッチ画像と同じですか？
役割が違います。カバーは本文内のレイアウトで、アイキャッチは記事の代表画像として一覧や記事上部などに使われます。
背景へ動画を使ってもよいですか？
利用できますが、容量や動きが読みにくさへ影響します。短く軽い動画を使い、文字の可読性とスマホでの動作を確認してください。
文字なしで画像だけ表示してもよいですか？
可能ですが、文字を重ねないなら通常の画像ブロックの方が設定が単純です。目的に合うブロックを選びます。