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

2020年9月13日

ワードプレスのブロックエディターでは、従来のクラシックエディターになかった新しい機能が使えます。ここでは、画像にテキスト（文字）を簡単に重ねて表示できる『カバー』というブロック要素を使ってみましょう。

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

 

前提条件

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

ようは、ワードプレスとして、プレーンな状態ですね。当然ですが、WordPressはversion5.0以降でブロックエディター（Gutenberg）が使用できる設定が大前提です。

 

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

参考記事：ワードプレス　初めてのブロックエディター（編集画面の各機能）

参考記事：ワードプレス　Gutenberg（ブロックエディター）で記事作成

 

 

 

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

①ブロック要素に『カバー』を選択する

②画像を挿入（カバー要素の設定ウィンドウで指示される）

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

④画像の上にテキストが重ねて表示される

 

といった感じで、すごく簡単にテキストを画像に重ねることができます。

 

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

 

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

 

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

 

 

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

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

まずは以下のように、画面左上の+マークをクリックして、ブロック一覧表から『カバー』を選択しましょう。

『カバー』は、ブロック一覧表の”メディア”の中に存在しています。

 

ちなみに、ワードプレスversion5.5からは、ブロック一覧表にマウスオーバーすると、そのブロックのプレビューが表示されるようになりました。以下は、カバーブロックのプレビューです。

 

カバー要素の設定ウィンドウが開く

そうすると、次のようにカバー要素の設定ウィンドウが開きます。

カバーブロックの中には、背景画像を挿入するボタン（”アップロード”または”メディアライブラリ”）のほか、画像でなく単一色を背景色に選ぶこともできます。

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

もし、画面右にブロックパネルが表示されない場合は、画面右上の設定ボタン（歯車マーク）をクリックすれば表示・非表示を切り替えできるようになっています。

 

 

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

 

画像をメディアライブラリから選択

今回は、メディアライブラリに登録されている既存画像を選択します。

ここで新規画像をドラッグ＆ドロップしても追加登録できますよ。

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

 

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

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

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

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

 

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

 

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

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

文字色は、白色、文字サイズは大となっていますので、そのまま入力しました。もし文字色・背景色や文字サイズを変更したければ、通常の段落ブロックと同じように、画面右のブロックパネルでできます。文字の太字化などの装飾は、ブロック内ツールバーで可能ですね。

 

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

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

 

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

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

 

 

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

 

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

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

 

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

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

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

 

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

 

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

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

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

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

 

コンテンツの配置を変更

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

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

 

 

固定背景にしてみる

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

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

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

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

 

焦点ピッカー

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

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

横長の画像をスマホのように縦長画面で見ると顕著にわかります。縦いっぱいに画像が広がると画像の横がスマホ画面がはみ出し、表示されないのです。そこで、焦点ピッカーで、中心点を変えてみたので下の例です。

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

 

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

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

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

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

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

 

 

 

まとめ

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

 

これまではカスタムCSSを使う必要のあったデザインが簡単に設定できることがわかりますね。ヘッダー画像やページの1stビューの画像に有効だと思います。

 

ブロックエディターならではの機能を、使いこなしてみてはいかがでしょうか。