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