WordPressカバーブロックの使い方 背景画像の設定

WordPress

【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法

WordPressを利用してホームページを作成する際に画像背景の上に文章を表示させたい人もいるのではないでしょうか。

画像加工ソフトを使って文字を入れる方法もありますが、WordPressの「カバーブロック」を使うと、直に追記できるので便利です。
 

カバーブロックの説明
 
今回はWordPressブロックエディターのカバーブロックの使い方を説明していきます。
 

■【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法(動画解説版)


 

(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。
 


 

(関連記事)ブロックエディターの使い方について

本記事では、カバーブロックのやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

ブロックエディター 「カバーブロック」とは

カバーブロックとは、画像を背景として設定して、その上に段落や見出しブロックを挿入して表示することができるブロックです。

従来のイラストレーターやフォトショップのソフトを使わなくても、文字を入力したり、背景の色や透過度等を変えたりできるので作業効率が上がります。


 

カバーブロックは使い方は以下の手順になります。

  1. カバーを選び画像を背景画像に設定する
  2. 追加したカバーブロックの上に段落などのブロックを入力する

カラムブロック と同じで、カバーブロックの中に他のブロックが入れることができるのが特徴です。

カバーブロックの説明
 

手軽に画像にテキストを挿入できて、テキストの文字色を変えたり、画像に重ねるオーバーレイの色や画像の透過率を変えられます。

 

カバーブロックの使い方

カバーを選び画像を背景画像に設定する

まずは、カバーを選び画像を背景画像に設定していきます。

ページの編集画面で左上の「+」プラスボタンをクリックして、メディアの中からカバーを選びます。

 

カバーブロックが挿入されて、以下の画面が表示されます。画像を選択するために、「アップロード」またはメディアライブラリを選択します。

 

挿入したい画像にチェックを入れて、右下の選択ボタンをクリックします。

 

画像を挿入したら、以下のような画面が出てきます。

 

カバーブロックの上に段落などのブロックを入力する

初期状態では大きめのフォントサイズの段落ブロックが配置されています。入れたい文字を入力しましょう。

 

つぎにボタンブロックを追加してみましょう。左上の+のところを押して、ボタンをクリックします。

 

そうすると、以下のようにボタンが出てきますので、入れたい文字を入力してください。

 

右サイドバーの色設定をクリックすると、ボタンの文字色と背景色を設定する画面が出てきます。

 

今回は文字色は白、背景色は赤に設定しました。

 

カバーブロックの中でも同様にボタンブロックの設定ができます。ここでは、中央揃えにしておきましょう。

 

コンテンツ中央揃えを選んだら、以下のような表示になります。

 

カバーブロックのその他の設定項目

カバーブロックでは、画像の上に色を重ね合わせて(オーバーレイ)不透明度を設定したり、固定背景、焦点ピッカーなども設定できるようになっています。
 

オーバーレイの色と不透明度の設定

画像の上に、色を重ね合わせて不透明度も設定することができます。

オーバーレイの色を変更したり、透過率を変えることで、文字を読みやすくしたり、画像の印象を変えることができるので、自分の好みの色や透過率に調節してみましょう。

 

幅の設定

カバーブロックでは、背景の幅を設定することもできます。下記は全幅に設定する例です。
全幅設定
 

全幅背景が設定されました。
全幅設定
 

※全幅設定はサイドバーありのレイアウトやご利用のテーマによっては、意図せぬ表示になる場合がありますのでご注意ください。
 

固定背景設定

右のカバー設定から、背景を固定にすることもできます。


 

繰り返し背景

右のカバー設定から、背景画像の繰り返し設定をすることもできます。下記は、ドットのパターン画像を繰り返しした例です。
繰り返し設定
 

まとめ

まとめです。今回はWordPressブロックエディターのカバーブロックの使い方を説明しました。
 
カバーブロックでは背景画像にテキストを入力したり、ボタンを追加したり、画像に色を重ねて(オーバーレイ)、透過率を変えることができる便利なブロックです。
カバーブロックの説明
 

■【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法(動画解説版)


 

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,