バナーのレイアウトをカスタマイズする

カバーブロックは、バナーのコンテンツを入れるコンテナブロックです。配置やコンテンツの位置、そのほかの設定を変更してレイアウトを調整できます。このガイドでは、バナーのレイアウトをカスタマイズする方法を紹介します。

この動画では、カバーブロックを使ってバナースタイルのセクションを作成する方法を学べます。画像または動画の背景の上にテキストやほかのブロックを追加する方法、レイアウトやフォーカルポイントの調整、オーバーレイのカスタマイズ、モバイルでのデザインのプレビューについて説明しています。

ページ、投稿、またはテンプレート内でバナーの配置を調整できます。バナーの配置を変更するには、以下の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. 表示されたブロックツールバーで、「配置」ボタンをクリックします。

3. 以下のオプションから選択します。
   • 全幅: バナーを画面の全幅まで広げます。
   • 幅広: バナーをメインコンテンツエリアより広く表示しますが、全幅にはしません。
   • 左揃え、中央揃え、右揃え: コンテンツエリア内でバナーを配置します。

バナー内のテキスト、ボタン、その他のコンテンツの位置を調整できます。バナー内でコンテンツをどこに配置するかを調整するには、以下の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. 表示されたブロックツールバーで、「コンテンツの位置を変更」ボタンをクリックします。

3. プリセットオプションから1つ選択して、コンテンツをバナーの上部、中央、または下部に移動します。

画像を常に高さいっぱいに表示するには、ブロックツールバーの「フルハイトの切り替え」オプションを設定します。

1. カバーブロックをクリックして選択します。
2. 表示されたブロックツールバーで、「フルハイト」ボタンをクリックします (アイコンは角だけが表示された四角形のように見えます)。

もう一度ボタンをクリックすると、フルハイトの設定を解除できます。

以下の手順で、カバーブロック内のコンテンツの配置を変更できます。

1. カバーブロックをクリックします。
2. ブロック設定サイドバーで「インナーブロックにコンテンツ幅を使用」を切り替えると、カバーブロック内のコンテンツの表示方法を調整できます。
3. 「インナーブロックにコンテンツ幅を使用」がオンになっている場合、カバーブロック内のブロックには、以下の幅設定が適用されます。
   • コンテンツ: ワイド幅または全幅に設定されていないブロックのコンテンツエリアの幅です。
   • ワイド: ワイド幅に設定されたブロックのコンテンツの幅です。

ブロックの幅を変更する方法について詳しくはこちらをご覧ください。

以下の手順で、カバーブロックにパディングとマージンを追加できます。

バナーのサイズを一定に保つには、以下の手順で最小の高さを設定します。

1. カバーブロックをクリックします。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。白黒の円のアイコンです。
3. 「最小の高さ」設定を見つけます。
4. バナーのサイズを一定に保つため、単位を指定して高さを入力します。