ワードプレス　ブロックエディター　カバーブロックで画像に文字を重ねる方法

2022年6月1日

ワードプレスのGutenberg（ブロックエディター）のカバーブロックの使い方を紹介します。

カバーブロックを使えば、画像にテキスト（文字）を重ねて表示することが簡単にできます。

※この記事は、2022年5月24日のワードプレスversion6.0へのアップデートにより、2022年6月1日にリライト追記しました。

前提条件

テーマはTwenty Seventeenを使用、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態です。

version5.9ではフルサイトエディターを使うブロックテーマTwenty Twenty-Twoが導入されましたが、まだまだ課題が多く普及には時間がかかるでしょう。したがって従来テーマの代表格として人気が根強いTwenty Seventeenを選びました。(したがって、本記事の情報は他の従来テーマでも同様に取り扱うことができます。)

また、ブロックエディターの基本的な使い方については、次の記事を参考にしてください。

・ブロックエディターの画面内各機能の説明

ブロックエディターでの記事の作成方法
（画像ブロックと見出し・段落ブロックの使い方）

画像にテキストを重ねる手順概要

次の手順で簡単に画像の上にテキストを重ねて表示することができます。

1. カバーブロックを記事内に挿入
2. カバーブロックに背景画像を挿入
3. 画像の上の入力ブロックにテキストを入力

また、重ねたテキストの文字色を変更したり、画像に色を重ねるカラーオーバーレイや画像の透過率を変更したりもできます。

これを従来のクラシックエディターでやろうとすると、カスタムCSSを使う必要があるので、ある程度HTMLやCSSの知識が必要となってしまうんですね。でもブロックエディターならそんな必要もなく、非常に簡単にできてしまいます。

それでは、順番に詳細な手順を紹介していきましょう。

背景画像にテキストを重ねる手順詳細

①カバーブロックを記事内に挿入する

まずはブロック要素にカバーを選択

画面左上の+マークをクリックして、ブロック一覧表から”カバー”を選択します。

ちなみに、ブロック一覧表にマウスオーバーすると、そのブロックのプレビューが表示されます。
以下は、カバーブロックのプレビューです。

カバーブロックの設定ウィンドウが開く

カバーブロックを選択して記事内に挿入すると次のように表示されます。

本文欄にはカバーブロックのツールバーと初期設定用パネル、画面右には設定用のブロックパネルが表示されます。

---

---

②カバーブロックに背景画像を挿入

背景画像の挿入には大きく３つの方法があります。

1. 新規画像をパソコンからドラッグ＆ドロップする
2. メディアライブラリを開けて画像を選択する
3. アイキャッチ画像を使う

※アイキャッチ画像を挿入するには、この記事にアイキャッチ画像の設定が必要です。

どの方法で画像を挿入しても、ここから先の手順は同じです。ここでは方法②のメディアライブラリを使っていきます。

それでは、”メディアライブラリ”をクリックしてみましょう。または、ツールバーの”メディアの追加”からメディアライブラリを選択してもOKです。

メディアライブラリに登録されている既存画像を選択します（もちろん新規画像をメディアライブラリにドラッグ＆ドロップしても使用可能です）。

メディアライブラリ右下の”選択”をクリックして画像をカバーブロックに挿入します。

③画像の上の入力ブロックにテキストを入力

挿入された画像の上にテキスト入力ブロックが表示される

画像を挿入すると、自動的に画像のうえにテキスト入力ブロックが表示されます。

画面右の設定パネルを見ると、”段落”を表示されており、これが段落ブロックであることがわかります。背景画像の上に段落ブロックが重ねられた形になっているわけですね。

ブロック内ツールバーのPマーク（Pの左右逆のマーク）をクリックすれば、段落ブロックの代わりに見出しブロック（h2、h3、h4・・・）などにも変換できます。

ここでは段落要素のままテキスト入力をしていきます。

段落ブロックに文字の入力

下記のように、文字を入力しました。

自動的に文字色は白色、文字サイズは大となっていますので、そのまま入力しました。

もし文字色・背景色や文字サイズを変更したければ、通常の段落ブロックと同じように、画面右の設定パネルでできます。

文字の太字化などの装飾は、ブロック内ツールバーで可能ですね。

文字を入力してリターン（[Enter]キー）をクリックすると、次の段落ブロックが表示されるので、さらに入力でします。

今度は、イベントの開催日時を、標準の文字サイズで入力しました。

このように、複数の段落をカバーブロック内に設置することができます。

同じ段落ブロック内で改行したければ、”SHIFT+[Enter]”を使いましょう。

以上で画像の上にテキスト（段落ブロック）を重ねることができました。

段落の下にボタンブロックを設置

カバーブロック内に設置できるのは、段落や見出しだけではありません。試しに”ボタンブロック”を設置してみましょう。

ボタンブロックは、ブロック一覧表の”デザイン”にグルーピングされています。

以下のように、ボタンを設置してみました。

ボタン内に”参加はこちら”と入力した後、ブロック内ツールバーと画面右の設定パネルで、以下の通り設定しています。

• 項目の揃え位置は中央を選択（ボタンが中央配置されます）
• スタイルには輪郭を選択（ボタン内がべた塗りでない形となります）
• 色はピンク色を選択
• 角丸をゼロpxにして、角をとった完全な長方形とする

以上で、背景画像の上にテキストやボタンを重ねることができました。

リスト表示でブロックの構成を確認

ここまでで一度リスト表示でブロックの構成を確認してみます。

カバーブロックの中に段落ブロックが２つ、ボタンブロックが１つ、ボタンブロックの中にはさらにボタンが入っているのがわかります。

それぞれのブロックを編集する場合は、リスト表示から選択すると間違いがないので便利です。

ワードプレスversion5.9ではリスト表示でブロックをドラッグ＆ドロップできるなど、便利な機能が追加されました。

では次に、カバーブロックの編集機能を紹介していきます。

カバーブロック全体の編集機能

カバーブロックを選択しておきます（カバーブロック内の他のブロックを選択しないように注意しましょう）。

リスト表示で親となっている”カバー”を選択すると確実です。

では順番に紹介していきます。

コンテンツの配置を変更

コンテンツというのはこの場合、カバーブロックの中に配置した各ブロックのことをいいます（今回は段落とボタン）。

ブロック内ツールバーの”コンテンツの配置を変更”ボタンで配置変更することができます。
配置の初期値は、中央/中央　となっています。

例として、コンテンツを左上、右下に配置してみると次のようになります。

固定背景にしてみる

画面右の設定パネルのメディア設定の中に固定背景への切り替えボタンがありますので、固定背景をONにしてみます。

サイト表示がどうなるか、サイトを表示させて記事をスクロールして確認してみましょう。

背景画像は固定され、テキストが画像の上をすべるようにスクロールされます。

試しに１つカバーブロックで固定背景にしてみました。

ちょっと雰囲気を変えるのにいいですね。固定背景にすると、背景画像が、ブロックパネルだけでなくサイトを表示全体に広がるため、画像が大きく見えるようになることも特徴です。

焦点ピッカー

焦点ピッカーは、背景画像の表示を、元画像のどこを中心にして表示させるかを決めます。
（画面右の設定パネルで設定します）

背景画像が今回のように横長の場合、パソコン表示で見ているとわかりにくいことですが、背景画像は、必ずしも元画像全体を表示するわけではありません。

横長の画像をスマホのように縦長画面で見ると顕著にわかります。

縦いっぱいに画像が広がると画像の横がスマホ画面がはみ出し、表示されないのです。

そこで、焦点ピッカーで、中心点を変えてみたので下の例です。

焦点ピッカーで横の位置を変更することで、元画像を切り取る場所が変わるのがわかりますね。

このようにカバーブロックでは、表示させるデバイスによって画像の縦横比が変わってしまいます。もし縦横比をキープしたまま画像を表示したければ次の記事で紹介していますので、参考にしてみてください。

カラーオーバーレイと透過率を変えてみる

今度は、カラーオーバーレイを使ってみましょう。
（画面右の設定パネルで設定します）

カラーオーバーレイは、色を画像に重ねることで、そのうえの文字を読みやすくしたり、画像全体の雰囲気を変えたりするのに利用されます。重ねた色の不透明度を変更することもできます。

カラーオーバーレイの初期値は、黒色、不透明度50％となっています。

色は変更せず不透明度をゼロ、すなわちカラーオーバーレイが全くかかっていない状態だと次のようになります。

カラーオーバーレイを適切にかけないと、コンテンツが読みにくくなるのがわかります。

カラーオーバーレイは、次のようにグラデーションをかけることも可能です。

放射状グラデーションを使って中央のコンテンツ部分のみを暗くし、コンテンツの読みやすさをキープしています。

グラデーションは放射状（円形）だけでなく線形も選択できます。線形の場合は方向も変更できますので、コンテンツの配置位置によって調整が可能です。

カバー画像の最小の高さを設定する

カバー画像の最小高さを設定することができます（画面右の設定パネルで可能です）。

カバー画像の最小高さの初期値は430pxに設定されています。

カバー画像の高さは、内部に入っているコンテンツの高さに合わせて自動的に調整されます。

ためしに最小高さを1pxに設定してみても、コンテンツの高さ（正しくはパディングも含めた高さ）以下にはならないことに注意しましょう。

ちなみにカバーブロックのパディング初期値は1emとなっています。

カバーブロックのパディング設定

ワードプレス5.7以降は、テーマにcustom-spacingの設定がしてあればパディング設定できるようになっています。

custom-spacingの設定はfunctions.phpで次の記述をすればOKです。

add_theme_support( 'custom-spacing' );

もしくは子テーマのfunctions.phpに次の記述をします。

function wpdc_enable_gutenberg_custom_spacing() {
	add_theme_support( 'custom-spacing' );
}
add_action( 'after_setup_theme', 'wpdc_enable_gutenberg_custom_spacing' );

テーマTwenty Seventeenでも上記の記述をすれば、カバーブロックの画面右設定パネル内にパディング設定が表示されるようになります。

カバー画像の最小高さを1pxと小さくしていても、パディングを設定しておくことで次のように高さをキープするようになります。

※パディング設定の青いボタンをクリックすれば、上下と左右のパディングを別々に設定可能です。px以外に％、rem、em、vwも使えます。

繰り返し背景を使う

画面右パネルのメディア設定で繰り返し背景をONにすると背景が繰り返されます。ただし、そのためにはコンテンツ領域よりも十分小さい画像を選ぶ必要があります。

以下は320×320pxサイズの画像をカバー画像に指定し、繰り返し背景をONにしたものです。

画像をフルハイトに設定する

カバーブロックの画像サイズをフルハイトに設定が可能です。

ブロック内ツールバーのフルハイト切り換えボタンを使います。

ただし、ヒーローイメージにするためには、横幅も画面いっぱいにする必要があるので、配置を全幅としてやります。（※テーマTwenty Seventeenは対応していません）

すると次のような画面表示が可能です。

※使用しているテーマによって全幅配置を選択できない場合や、全幅配置を選択しても全幅にならない場合がありますので注意しましょう。全幅表示については次の記事を参考にしてください。

デュオトーンフィルターをかける

画像にデュオトーンフィルターを適用することができます。

デュオトーンとは、2色で画像などをデザインしたもので、ポップな雰囲気を出す効果があります。

ツールバー内のデュオトーンフィルター適用ボタンを使います。

詳細な使い方はこちらの記事を参照ください。

内部の段落ブロックに背景色と透過率を設定する

カバーブロック独自の機能ではありませんが、カバーブロック全体でなく内部の段落ブロックのみに背景色や透過率を設定すると次のような見映えになります。
（カバーブロックのカラーオーバーレイは不透明度ゼロとしています。）

段落ブロックでの色や透過率の設定手順は以下の通りです。

1. 段落ブロックの設定サイドバーで背景色をクリック
2. 色の表示部をクリック
   （またはカラーパレットで色選択後に色の表示部をクリック）
3. カラースライダーで色を設定
   （すでにカラーパレットで色選択済なら不要）
4. 透過率をスライダーで調整

画像でなく背景色を設定してコンテンツを作成する

最後に、カバーブロックの使い方として背景画像は使わずに背景色のみを設定してコンテンツを作成する方法を紹介します。

といってもめちゃくちゃ簡単で、最初にカバーブロックを開けたときに、画像は入れずに背景色を設定するだけです。

ここで背景色を選択すればよいわけです。例えば黒を選択すると次のようになります。

背景色はカラーオーバーレイとして設定されるので、あとで色変更したければ、画面右のパネル内でカラーオーバーレイを変更します。不透明度も変更可能です（初期値は不透明度100％）。

あとは、画像を選んだときと同じ手順で、背景色の上に段落ブロックや画像ブロックなどさまざまなブロックを重ねてコンテンツを作ることができます。

例えば、ページの中で一部だけ別の背景色を横幅いっぱいに広げたコンテンツを作ることができます。

上記コンテンツ例は、白背景色のページの中に横幅いっぱいに黒背景色を設定しています。

具体的な設定は以下の通りです。

• 背景色は黒（カラーオーバーレイ）
• カバーは全幅配置として横幅いっぱいに広げる
• カバーブロック内のコンテンツは上からスペーサー・カラム・スペーサーの各ブロックで構成

※テーマによっては全幅対応していない場合があります。また全幅対応のテーマでも、レイアウトは１カラムとしてください。

まとめ

以上、画像にテキストやボタンを簡単に重ねることのできる”カバー”ブロックについて解説してきました。

カスタムCSSを使うことなく、背景画像の上にテキストなど他の要素を重ねることができるので、ヘッダー画像やページの1stビューの画像に有効だと思います。

今回はワードプレス6.0までの機能を紹介してきましたが、リリースされた当初に比較して結構盛りだくさんになってきました。これからもバージョンアップとともに機能が増えていくでしょう。

ブロックエディターの使い方全般については次の記事が参考になります。