WordPressを利用してホームページを作成する際に画像背景の上に文章を表示させたい人もいるのではないでしょうか。
画像加工ソフトを使って文字を入れる方法もありますが、WordPressの「カバーブロック」を使うと、直に追記できるので便利です。
今回はWordPressブロックエディターのカバーブロックの使い方を説明していきます。
■【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法(動画解説版)
(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。
もくじ
(関連記事)ブロックエディターの使い方について
本記事では、カバーブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
ブロックエディター 「カバーブロック」とは
カバーブロックとは、画像を背景として設定して、その上に段落や見出しブロックを挿入して表示することができるブロックです。
従来のイラストレーターやフォトショップのソフトを使わなくても、文字を入力したり、背景の色や透過度等を変えたりできるので作業効率が上がります。
カバーブロックは使い方は以下の手順になります。
- カバーを選び画像を背景画像に設定する
- 追加したカバーブロックの上に段落などのブロックを入力する
カラムブロック と同じで、カバーブロックの中に他のブロックが入れることができるのが特徴です。
手軽に画像にテキストを挿入できて、テキストの文字色を変えたり、画像に重ねるオーバーレイの色や画像の透過率を変えられます。
カバーブロックの使い方
カバーを選び画像を背景画像に設定する
まずは、カバーを選び画像を背景画像に設定していきます。
ページの編集画面で左上の「＋」プラスボタンをクリックして、メディアの中からカバーを選びます。
カバーブロックが挿入されて、以下の画面が表示されます。画像を選択するために、「アップロード」またはメディアライブラリを選択します。
挿入したい画像にチェックを入れて、右下の選択ボタンをクリックします。
画像を挿入したら、以下のような画面が出てきます。
カバーブロックの上に段落などのブロックを入力する
初期状態では大きめのフォントサイズの段落ブロックが配置されています。入れたい文字を入力しましょう。
つぎにボタンブロックを追加してみましょう。左上の＋のところを押して、ボタンをクリックします。
そうすると、以下のようにボタンが出てきますので、入れたい文字を入力してください。
右サイドバーの色設定をクリックすると、ボタンの文字色と背景色を設定する画面が出てきます。
今回は文字色は白、背景色は赤に設定しました。
カバーブロックの中でも同様にボタンブロックの設定ができます。ここでは、中央揃えにしておきましょう。
コンテンツ中央揃えを選んだら、以下のような表示になります。
カバーブロックのその他の設定項目
カバーブロックでは、画像の上に色を重ね合わせて（オーバーレイ)不透明度を設定したり、固定背景、焦点ピッカーなども設定できるようになっています。
オーバーレイの色と不透明度の設定
画像の上に、色を重ね合わせて不透明度も設定することができます。
オーバーレイの色を変更したり、透過率を変えることで、文字を読みやすくしたり、画像の印象を変えることができるので、自分の好みの色や透過率に調節してみましょう。
幅の設定
カバーブロックでは、背景の幅を設定することもできます。下記は全幅に設定する例です。
全幅背景が設定されました。
※全幅設定はサイドバーありのレイアウトやご利用のテーマによっては、意図せぬ表示になる場合がありますのでご注意ください。
固定背景設定
右のカバー設定から、背景を固定にすることもできます。
繰り返し背景
右のカバー設定から、背景画像の繰り返し設定をすることもできます。下記は、ドットのパターン画像を繰り返しした例です。
まとめ
まとめです。今回はWordPressブロックエディターのカバーブロックの使い方を説明しました。
カバーブロックでは背景画像にテキストを入力したり、ボタンを追加したり、画像に色を重ねて(オーバーレイ)、透過率を変えることができる便利なブロックです。
■【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法(動画解説版)
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
