みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、画像加工なしで簡単に、WordPress上のみで画像にテキストを被せる方法をお伝えいたします。

画像の中にテキストを被せる機能もあります。
それには、「カバー」というブロックを使用します。

カバーブロックでテキストを被せた例
画像に書かれているテキストは選択、コピーペーストできるようになっています。つまり、加工なしで画像の上にテキストを載せているのがわかります。これが、カバーブロックの機能です。
「カバー」ブロックの挿入



画像をアップロード、もしくはメディアライブラリから選択します。画像だけでなく、動画も可能です。
※YouTubeなどの外部埋め込みは除きます。
色を選択すると、背景色のみのシンプルなデザインにできます。


「カバー」ブロックの変換
画像ブロックの変換方法は、2通りあります。
- ブロックツールバーの「A」とかかれたマーク「画像上にテキストを追加」をクリックする。
- ブロックツールバーの左端にある「画像:ブロックタイプまたはスタイルを変更」アイコンをクリックして「カバー」を選択する。
さて、これでメディアの上にテキストを記述できるようになりました。
メディア上のテキスト編集

メディアの上にあるテキストは、段落ブロックです。もちろんフォント変更や文字装飾なども可能です。

デフォルトで入っている段落ブロックは削除可能です。別のブロックも追加できます。
配置変更

「画像」ブロックと同様に、画像の配置も右寄せ・中央揃え・左寄せなどが選択できます。

コンテンツ位置を変更

ブロックツールバーにある、9つの黒い四角い点マーク「コンテンツ位置を変更」でテキストの配置を調節できます。
大きな黒い点がコンテンツの位置です。

デフォルトでは中央になっているのを右上にすると、テキストがメディアの右上に配置されます。

フルハイトを切り替え

4つの隅にカギカッコがあるアイコン「フルハイトを切り替え」では、画像の高さがウィンドウと同じになります。


これは、どのデバイスやブラウザサイズも変わりません。

メディアの置換
メディアの変更は、「置換」で可能です。

WordPressへアップ済みの画像に差し替えるなら「メディアライブラリを開く」を、新しい画像をアップロードするなら「アップロード」を選択します。

右メニューバーを解説しましょう。
メディア設定

- 固定配置
オンにすると、スクロールしても画像がその場から動かなくなります。 - 繰り返し背景
オンにすると、画像を複数配置した背景になります。


これらを活用すれば、このように画像を背景にしたデザインを作成できます。

焦点ピッカー

「焦点ピッカー」の青い丸とその下にある「左」と「上」の入力エリアで、切り取りの中心点をどこをするか調整できます。
※固定配置がオンだと表示されません
「メディアをクリア」で画像を削除します。

サイズ

画像の最小の高さを変えられます。
入力ボックス右にある「px」をクリックすると、他の単位を選択できます。

「最小の高さ」であるため、設定したサイズよりも画像の中のブロックが長い場合は、反映されません。


オーバーレイ

メディアに被せる色を変えられます。
色のフィルターがいらない場合は、不透明度を「0」にしましょう。色が消えます。


以上、画像や動画にテキストなどを被せられる、「カバー」ブロックを解説しました。
画像を複数並べたり、画像の横にテキストなどを並べたり、画像以外の複数ブロックを並べたりする方法は、こちらの記事をご覧ください。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。