画像を背景にする方法(フルワイドブロック、カバーブロック)

画像を背景にする方法(フルワイドブロック、カバーブロック)

カバーブロックはデフォルトのWordPress本体に付随しているブロックです。
フルワイドブロックは、テーマで設定されたブロックで、テーマが違うと微妙に設定内容が違うばあいもあります。

目次

カバーブロックを設置する方法

  1. いつもどおりをクリックしてブロックリストを表示
    その中から下のカバーブロックをクリック、記事本文に配置する。
  2. 背景色、背景画像、どちらも「あり」「なし」で設定自由。
    設定した色の透過度(透明度)(オーバーレイカラー)で、背景画像にカバーをかけられる。
  3. ②の上に段落ブロックか見出しブロックを配置して、タイトルを書いて帯として利用する。
    ※画面いっぱいの帯にする場合は、カバーブロックのメニューバーにあるアイコンで「フルワイド(全画面)」を選択する必要があります。
  4. ②の上に段落ブロックで文章を書いたり画像など必要なブロックを配置して挿入、セクションとして利用する。

  5. 背景画像ありのセクションと、真っ白など単色の背景色のセクションと交互に組み合わせることで、ページにメリハリをつける。(LPでよく使われる手法です)
  6. 背景画像(メディア)や色を変更したい時は、カバーブロックを選択⇒右サイドメニューの設定画面でできます。
  7. 背景画像なしで、背景色のみにすることもできます。
  8. 背景画像有り・無し(背景色のみ)ともに、その上に好きなブロックエディタを配置して編集することができます。
    ※カラムブロックを配置して、区分けすることも可能です。
  9. あとは、見出し用の帯として使う、または1コーナーとして幅広く使うのも自由です。

動画で説明|カバーブロックを使って背景画像の上に記事を書く方法

※2022年に撮った動画です。
※言い回しが上の説明と異なる場合もあります。(アイコンとボタンというように呼称の違いとか)

■動画がなかなか表示されないときは、YouTubeをクリックしてYouTube画面でご覧ください。

フルワイドブロックを設置する方法

  • いつもどおりをクリックしてブロックリストを表示
    その中から下のフルワイドブロックをクリック、記事本文に配置する。
    ※テーマによりアイコンの形が変わったりしてます。
  • 「カバー」ブロックと同じように背景画像を引いたり、背景色をつけたりして、セクションまたは帯として使う
    ※テーマでのブロックなので、テーマにより使い勝手が違ってくる場合もあります。
    ※テーマによりオーバーレイカラーの設定が自由にできない場合もあります。
目次