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

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

 

 

前提条件

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

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

 

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

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

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

 

 

 

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

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

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

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

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

 

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

 

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

 

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

 

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

 

 

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

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

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

『カバー』は、一般ブロックの中に存在しています。

 

 

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

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

挿入したい画像をここにドラッグ＆ドロップしても挿入できますが、ここではメディアライブラリを選んで既存の画像を挿入します。

 

 

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

メディアライブラリから登録されている既存画像を選択します。

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

 

 

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

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

ブロックの左上にP（の左右反対文字）が表示されており、段落要素としてブロックの上にテキストが重ねられるのがわかります。このPをクリックすれば、段落要素の代わりに見出し要素（h2、h3、h4・・・）も選択できますよ。

 

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

 

 

文字色の変更

すぐにテキストを入力したいところですが、画像が黒っぽいので、文字色が黒のままではよく見えません。そこで、文字色を白っぽく変更します。

 

通常の段落要素への入力時と同じように、エディターの右側のブロックパネルが段落要素編集用に自動的に切り替わっています。ここから文字色を変更しましょう。ここでは、ライトグレーを選びました。

 

 

テキストを入力してサイト表示で確認

以下のように入力してみました。

通常の段落への入力と同じように、Shift+リターンで段落内改行ができます。

 

サイト表示して確認すると、次のようになります。いい感じですね。

 

 

 

オーバー要素のさまざまな編集機能

オーバー要素の画像部分を選んでおくと、右側のブロックパネルに様々な機能が表示されていますので使ってみましょう。

 

 

固定背景にしてみる

ブロックパネルのカバー設定の中に固定背景への切り替えボタンがありますので、固定背景にしてみます。サイト表示がどうなるか、サイトを表示させて記事をスクロールして確認してみましょう。

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

ちょっと雰囲気を変えるのにいいですね。

 

 

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

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

カラーオーバーレイは、色を画像の上に重ねるというよりも、画像の下に背景色（カラーオーバーレイ）を設定して、その上に透過率50%の画像が載っている感じですね。

なので、画像の透過率を100%に近づけるとカラーオーバーレイの色に近づきます。

 

 

 

テキストの代わりにボタンを重ねることもできる

最後に、テキストの代わりにボタンを重ねてみましょう。もちろん、ボタンをクリックすると飛ぶリンク先も設定できます。

 

 

段落ブロック表示が表示されたところで段落ブロックを消去

画像を挿入した後にテキスト入力用の段落ブロックが表示されたところで、バックスペースをクリックして段落ブロックを消去します。

 

そうすると、ブロック選択用の+マークが表示されるので、クリックしましょう。

 

 

 

ボタン要素を選択する

レイアウト要素の中の『ボタン』を選択します。

すると、ボタンとリンク先入力ボックスが表示されます。

 

ボタンの必要事項を入力

リンク先URLとボタン内テキストの入力をします。

また、ボタンはセンターに配置したいので、ブロック左上で中央揃えを選択しましょう。

ついでに、右側のブロックパネルから、文字色と背景色を好みに変更します。ボタンの形状も変更可能です。

 

 

ボタン表示の完成

最後にサイト表示させて確認しましょう。

いい感じですよね。もちろん、ボタンをクリックすればリンク先へ飛ぶことができます。

 

 

まとめ

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

 

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

 

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