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

2021年7月26日

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

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

※この記事は、2021年7月のワードプレスversion5.8へのアップデートにより、2021年7月にリライト追記しました。

前提条件

テーマはTwenty Seventeenを使用、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態です。
(したがって、本記事の情報は他のテーマでも同様に取り扱うことができます。)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カバーブロックを選択すると記事内に挿入されて、次のように設定ウィンドウが開きます。

画面右の情報パネルには、この段階では、”カバー”と表示がある以外は、特に何も設定する項目は並んでいません。

---

---

では、画像を挿入するために、”メディアライブラリ”をクリックしてみましょう。

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

今回は、メディアライブラリに登録されている既存画像を選択します。
（もちろん新規画像をドラッグ＆ドロップしても追加登録できます）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

同じ段落ブロック内で改行したければ、”SHIFT+[Enter]”でできます。

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

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

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

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

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

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

• スタイルにはアウトラインを選択（ボタン内がべた塗りでない形となります）
• 色はピンク色を選択
• 各丸半径をゼロにして、角をとった完全な長方形とする

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

では次に、カバーブロックの背景画像のスタイルを編集していきましょう。

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

カバーブロック内の背景画像の中の、段落やボタンなどのコンテンツ部分以外の部分をクリックすると、カバーブロック全体が選択されて、カバーブロック内ツールバーや、右側のブロックパネルにも様々な機能が表示されるようになっています。

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

コンテンツの配置を変更

ブロック内ツールバーの中に、コンテンツの配置を変更、というボタンがあります。デフォルトでは中央配置となっているコンテンツ（カバーブロック内の段落ブロックなど）の位置を変更できます。

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

固定背景にしてみる

ブロックパネルのカバー設定の中に固定背景への切り替えボタンがありますので、固定背景をONにしてみます。

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

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

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

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

焦点ピッカー

焦点ピッカーは、背景画像の表示を、元画像のどこを中心にして表示させるかを決めます。

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

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

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

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

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

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

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

今度は、カラーオーバーレイで、画像に色をつけた後、透過率も変えてみましょう。

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

下図は、画像に黒色を重ねて、不透過率75%に設定した例です。

少しオーバーな表現ですが、黒基調を増すことで、テキストが読みやすくなり、より高級感も出た感じでしょうか。

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

ワードプレスversion5.7から、カバーブロックの画像サイズをフルハイトに設定できるようになりました。

ブロック内ツールバーのフルハイト切り換えボタンでフルハイト設定できます。

ただし、ヒーローイメージにするためには、横幅も画面いっぱいにする必要があるので、配置を全幅としてやります。

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

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

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

ワードプレスversion5.8から、画像にデュオトーンフィルターを適用できるようになりました。

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

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

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

まとめ

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

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

このようにGutenbergには便利なブロックがたくさん準備されており、どんどんバージョンアップとともに機能が増えています。ぜひこの他の機能も使いこなしていきましょう。