ワードプレス ブロックエディター カバーブロックで画像に文字を重ねる方法
ワードプレスのブロックエディターでは、従来のクラシックエディターになかった新しい機能が使えます。ここでは、画像にテキスト（文字）を簡単に重ねて表示できる『カバー』というブロック要素を使ってみましょう。
※この記事は、2021年3月のワードプレスversion5.7へのアップデートにより、2021年3月にリライト追記しました。
前提条件
テーマは、Twenty Seventeenを使用、エディターの編集機能に影響を与えるTinyMCE Advancedなどは何も有効化していない状態です。
ようは、ワードプレスとして、プレーンな状態ですね。当然ですが、WordPressはversion5.0以降でブロックエディター（Gutenberg）が使用できる設定が大前提です。
また、ブロックエディターの基本的な使い方については、次の記事を参考にしてください。
ブロックエディターの画面内各機能の説明
https://web-children.com/2019/08/20/each-function-of-editor-...
ブロックエディターでの記事の作成方法（画像ブロックと見出し・段落ブロックの使い方）
画像にテキストを重ねる手順概要
①ブロック要素に『カバー』を選択する
②画像を挿入（カバー要素の設定ウィンドウで指示される）
③挿入した画像の上に表示された入力ブロックにテキストを入力
④画像の上にテキストが重ねて表示される
といった感じで、すごく簡単にテキストを画像に重ねることができます。
また、重ねたテキストの文字色を変更したり、画像に色を重ねるカラーオーバーレイや画像の透過率を変更したりもできます。
これを従来のクラシックエディターでやろうとすると、カスタムCSSを使う必要があるので、ある程度HTMLやCSSの知識が必要となってしまうんですね。でもブロックエディターならそんな必要もなく、非常に簡単にできてしまいます。
それでは、順番に詳細な手順を紹介していきましょう。
画像にテキストを重ねる手順詳細
まずはブロック要素にカバーを選択
まずは以下のように、画面左上の+マークをクリックして、ブロック一覧表から『カバー』を選択しましょう。
『カバー』は、ブロック一覧表の”メディア”の中に存在しています。
ちなみに、ワードプレスversion5.5からは、ブロック一覧表にマウスオーバーすると、そのブロックのプレビューが表示されるようになりました。以下は、カバーブロックのプレビューです。
カバー要素の設定ウィンドウが開く
カバーブロックを選択すると、次のようにカバー要素の設定ウィンドウが開きます。
カバーブロックの中には、背景画像を挿入するボタン（”アップロード”または”メディアライブラリ”）のほか、画像でなく単一色を背景色に選ぶこともできます。
画面右のブロックパネルには、この段階では、”カバー”と表示がある以外は、特に何も設定する項目は並んでいません。
※もし、画面右にブロックパネルが表示されない場合は、画面右上の設定ボタン（歯車マーク）をクリックすれば表示・非表示を切り替えできるようになっています。
では、画像を挿入するために、”メディアライブラリ”をクリックしてみましょう。
画像をメディアライブラリから選択
今回は、メディアライブラリに登録されている既存画像を選択します。
ここで新規画像をドラッグ＆ドロップしても追加登録できますよ。
メディアライブラリ右下の”選択”をクリックして画像を挿入します。
挿入された画像の上にテキスト入力ブロックが表示される
画像が挿入されると、自動的に画像のうえに、テキスト入力ブロックが表示されます。
ブロックパネルを見ると、”段落”を表示されており、これが段落ブロックであることがわかります。背景画像の上に段落ブロックが重ねられた形になっているわけですね。
ブロック内ツールバーのPマーク（Pの左右逆のマーク）をクリックすれば、段落要素の代わりに見出し要素（h2、h3、h4・・・）などにも変換できます。
ここでは段落要素のままテキスト入力をしていきます。
段落ブロックに文字の入力
下記のように、文字を入力しました。
文字色は、白色、文字サイズは大となっていますので、そのまま入力しました。もし文字色・背景色や文字サイズを変更したければ、通常の段落ブロックと同じように、画面右のブロックパネルでできます。文字の太字化などの装飾は、ブロック内ツールバーで可能ですね。
文字を入力してリターン（[Enter]キー）をクリックすると、次の段落ブロックが表示されるので、さらに入力します。
今度は、イベントの開催日時を、標準の文字サイズで入力しました。
このように、複数の段落をカバーブロック内に設置することができます。
同じ段落ブロック内で改行したければ、”SHIFT+[Enter]”でできます。
段落の下にボタンブロックを設置
カバーブロック内に設置できるのは、段落や見出しだけではありません。試しに”ボタンブロック”を設置してみましょう。
ボタンブロックは、ブロック一覧表の”デザイン”にグルーピングされています。
以下のように、ボタンを設置してみました。
ボタン内に”参加はこちら”と入力した後、画面右のブロックパネルで、以下の通り設定しています。
- スタイルにはアウトラインを選択（ボタン内がべた塗りでない形となります）
- 色はピンク色を選択
- 各丸半径をゼロにして、角をとった完全な長方形とする
以上で、背景画像の上にテキストやボタンを重ねることができました。
では次に、カバーブロックの背景画像のスタイルを編集していきましょう。
カバーブロック全体の編集機能
カバーブロック内の背景画像の中の、段落やボタンなどのコンテンツ部分以外の部分をクリックすると、カバーブロック全体が選択されて、カバーブロック内ツールバーや、右側のブロックパネルにも様々な機能が表示されるようになっています。
では順番に紹介していきます。
コンテンツの配置を変更
ブロック内ツールバーの中に、コンテンツの配置を変更、というボタンがあります。デフォルトでは中央配置となっているコンテンツ（カバーブロック内の段落ブロックなど）の位置を変更できます。
例として、コンテンツを左上、右下に配置してみると次のようになります。
固定背景にしてみる
ブロックパネルのカバー設定の中に固定背景への切り替えボタンがありますので、固定背景をONにしてみます。
サイト表示がどうなるか、サイトを表示させて記事をスクロールして確認してみましょう。
背景画像は固定され、テキストが画像の上をすべるようにスクロールされます。
ちょっと雰囲気を変えるのにいいですね。固定背景にすると、背景画像が、ブロックパネルだけでなくサイトを表示全体に広がるため、画像が大きく見えるようになることも特徴です。
焦点ピッカー
焦点ピッカーは、背景画像の表示を、元画像のどこを中心にして表示させるかを決めます。
背景画像が今回のように横長の場合、パソコン表示で見ているとわかりにくいことですが、背景画像は、必ずしも元画像全体を表示するわけではありません。
横長の画像をスマホのように縦長画面で見ると顕著にわかります。縦いっぱいに画像が広がると画像の横がスマホ画面がはみ出し、表示されないのです。そこで、焦点ピッカーで、中心点を変えてみたので下の例です。
焦点ピッカーで横の位置を変更することで、元画像を切り取る場所が変わるのがわかりますね。
このようにカバーブロックでは、表示させるデバイスによって画像の縦横比が変わってしまいます。もし縦横比をキープしたまま画像を表示したければ次の記事で紹介していますので、参考にしてみてください。
カラーオーバーレイと透過率を変えてみる
今度は、カラーオーバーレイで、画像に色をつけた後、透過率も変えてみましょう。
カラーオーバーレイは、色を画像に重ねることで、そのうえの文字を読みやすくしたり、画像全体の雰囲気を変えたりするのに利用されます。重ねた色の不透過率を変更することもできます。
下図は、画像に黒色を重ねて、不透過率75%に設定した例です。
少しオーバーな表現ですが、黒基調を増すことで、テキストが読みやすくなり、より高級感も出た感じでしょうか。
画像をフルハイトに設定する
ワードプレスversion5.7から、カバーブロックの画像サイズをフルハイトに設定できるようになりました。
ブロック内ツールバーのフルハイト切り換えボタンでフルハイト設定できます。
ただし、ヒーローイメージにするためには、横幅も画面いっぱいにする必要があるので、配置を全幅としてやります。
すると次のような画面表示が可能です。
※ただし、使用しているテーマによって全幅配置を選択できない場合や、全幅配置を選択しても全幅にならない場合がありますので注意しましょう。全幅表示については次の記事を参考にしてください。
まとめ
以上、画像にテキストやボタンを簡単に重ねることのできる『カバー』というブロック要素について解説してきました。
これまではカスタムCSSを使う必要のあったデザインが簡単に設定できることがわかりますね。ヘッダー画像やページの1stビューの画像に有効だと思います。
ところで、焦点ピッカーのところでも紹介したように、カバーブロックの画像は背景画像であるため、PCやスマホなど、その表示領域の縦横比が画像の縦横比と異なると、画像が全部表示されずに一部が切り取られてしまうことになります。
これを避けて縦横比を固定する方法をこちらの記事で紹介していますので参考にしてみてください。
このほか、画像関係のブロックに関しては、こちらの記事もおすすめです。
ブロックエディターならではの機能を、使いこなしてみてはいかがでしょうか。
