Aurora Design Blocksには、Webサイトにインパクトあるセクションを作れる「全幅カバーブロック」が用意されています。今回は、その使い方を7つのステップで解説していきます。
ブログ記事の導入や、キャンペーンセクションなどにぴったりのブロックです。
ステップ①：ブロック一覧から「Custom Cover」を選ぶ
まずは、ブロックの追加画面を開き、Aurora Design Blocksの中から[aurora-design-blocks]Custom Coverをクリックします。
このブロックは、全幅で背景画像＋内側にコンテンツを配置できる構造を持っています。
ステップ②：タイトル・テキストを追加する
カバーブロックを挿入したら、中に見出しや段落ブロックを自由に追加して、テキストを入力しましょう。
この時点では背景は白のままなので、構成の確認を先にしておくと◎。
ステップ③：背景画像をアップロードする
右側の「ブロック設定」メニューで、背景画像をアップロードをクリック。
画像を追加すると、セクション全体がビジュアル的に印象的になります。
ヒント： カバー画像には「テーマカラーと調和する写真」や「抽象パターン」などがおすすめです。
ステップ④：オーバーレイの不透明度を調整する
背景画像をそのまま使うと、テキストが読みにくくなる場合があります。
その場合は「オーバーレイ不透明度」のスライダーを使って、背景の明度を調整します。
例）-68に設定すると、背景が淡くなり文字が読みやすくなります。
ステップ⑤：「内側のコンテンツに記事幅を使用」をONにする
チェックを入れると、テキストなどの中身部分が「記事幅」内に収まるようになります。ページ全体のデザインとバランスを取りたい場合は、ONがおすすめです。
デフォルトはONです。OFFにすると、テキストも全幅になります。
ステップ⑥：背景色を変えて、背景画像なしでも使える
背景画像を使わず、「背景色」だけでもおしゃれに仕上げることができます。
例えば、#FBE0EFのような柔らかいピンクに設定することで、
ふんわりとした印象のセクションを簡単に作れます。
ステップ⑦：完成例をチェック
実際に完成した全幅カバーブロックはこのようになります👇
（※画像参照）
上部にタイトル、中央に本文、その背景にぼかした画像や色が入っており、
セクションとしてのまとまりが出ます。
🔰 まとめ
Aurora Design Blocksの全幅カバーブロックは、
- 背景画像 or 色の選択
- オーバーレイ調整
- 中身の幅の設定
など、細かな調整ができるのに簡単に扱えるのが特徴です。
ブログ記事の冒頭や、ブランドのメッセージを伝えたい箇所にぜひ活用してみてください。