【WordPress】文字の背景を画像や動画にする方法【簡単に重ねられる】

【WordPress】文字の背景を画像や動画にする方法【簡単に重ねられる】 WordPress

こんにちは、mickです。

WordPressで文字に画像や動画を重ねるのはどうやるの?
プラグインは入れたくないし、CSSも触りたくない

こんな要望にお応えします。

文字の背景を画像や動画にする。
WordPressに最初から入っている「カバー」という機能(ブロック)で実現できます。

環境はWordPress5以降です。

WordPressで文字と画像や動画を重ねる方法

文字の背景を画像にする

まずは文字の背景に画像を指定してみます。

文字の背景を画像にする

WordPressで文字の背景を画像にして重ねる方法は簡単。

ブロックエディタにある「カバー」を使うだけでOK。

ブロックエディタの「カバー」で文字と画像を重ねる
ブロックエディタの「カバー」で文字と画像を重ねる

画像はアップロードするか、メディアライブラリから選びます。

画像はアップロードするかメディアライブラリから選ぶ
画像はアップロードするかメディアライブラリから選ぶ

あとは文字を入力して作業は完了です。

画像を背景に、文字を入力して作業完了
画像を背景に、文字を入力して作業完了

改行は「shift + return」キー。

改行は shift + return キー
改行は shift + return キー

「カバー」では右のブロックメニューを使って次のような設定ができます。

カバーの設定メニュー
カバーの設定メニュー
  • 画像の映る位置の調整
  • 画像のサイズ(縦幅を指定して調整する)
  • 画像に他の色を重ねる(オーバーレイ)
  • 不透明度の変更

上のサンプルでは、画像の映る位置を中央に、画像サイズは縦を300px、不透明度は50%に指定しています。

次のサンプルは、いくつか設定を変更しています。

画像の映る位置は上
画像サイズはデフォルト
不透明度は60%
オーバーレイに紫色を指定

オーバーレイにはグラデーションを指定することもできます。

次は文字の背景に動画を設定します。

文字の背景を動画にする

WordPressで文字の背景を動画にして重ねる方法も簡単。
画像のときと同じブロックエディタで「カバー」を使えばOK。

画像のときと違うのは、選ぶメディアが「動画」という違いだけです。

動画を背景に文字を入力

文字(文章)は段落ブロックなので文字の色も変更できる

「カバー」右のブロックメニューは画像を選んだときと同じ項目になります。

  • 画像の映る位置の調整
  • 画像のサイズ(縦幅を指定して調整する)
  • 画像に他の色を重ねる(オーバーレイ)
  • 不透明度の変更

上のサンプルでは、画像の映る位置を中央に、画像サイズは縦を300px、不透明度は50%に指定しています。

まとめ。やってみたらすごく簡単だった

文章の背景に画像や動画を使う方法を紹介しました。

やってみたら簡単でびっくり。ブロックエディタの「カバー」便利。

特に背景を動画にするとかなり見栄えが変わります。
動画をうまくトップページで使えば、効果的にユーザーの興味をつかめそうですね。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/28

タイトルとURLをコピーしました