バナーのスタイルを設定する

カバーブロックには、バナーのスタイルを設定するためのオプションが用意されています。このガイドでは、オーバーレイの追加、アスペクト比の調整、ボーダーとシャドウの適用、バナースタイルの画像や動画のフォーカルポイントの微調整方法を説明します。

オーバーレイは、バナー画像や動画の上に半透明のカラーレイヤーを重ねて、テキストやそのほかのコンテンツを読みやすくします。オーバーレイの設定を追加または調整するには、以下の手順に従ってください。

アスペクト比を調整すると、バナーの形を変更できます。カバーブロックのアスペクト比を調整するには、以下の手順に従ってください。

カバーブロックにボーダーやシャドウを追加するには、以下の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。白黒の円のような形をしています。
3. ボーダーとシャドウセクションを見つけます。
4. 利用可能なコントロールを使って、ボーダーの幅、色、角丸を調整します。
5. ⋮ アイコンをクリックしてシャドウ設定を有効にすると、ドロップシャドウを追加できます。

ボーダーとシャドウの設定について詳しくはこちらをご覧ください。

固定背景（パララックス効果）を使うと、訪問者がスクロールしてもバナー画像をその場に固定できます。以下はその例です。

固定背景画像を作成するには、以下の手順に従ってください。

1. カバーブロックを追加します。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。白黒の円のような形をしています。
3. 「固定背景」をオンにします。

カバーブロックに動画をアップロードしている場合、このオプションは利用できません。

背景の繰り返し オプションを使うと、同じ画像を繰り返してカバーブロック内にパターンとして表示できます。カバーブロックで背景を繰り返すには、次の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。スタイルアイコンは白黒の円のような形をしています。
3. 「背景の繰り返し」をオンにします。

カバーブロックに動画をアップロードしている場合、このオプションは表示されません。

焦点は、バナーのサイズが変わったときに画像や動画のどの部分を表示したままにするかを決めます。これは、スマートフォンなどの小さな画面でカバー画像を表示するときに、画像全体を表示できない場合に役立ちます。小さな画面では、選択した焦点を中心に画像が表示されるため、画像の最も重要な部分が見えるようになります。

焦点を調整するには、次の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。スタイルアイコンは白黒の円のような形をしています。
3. 焦点ピッカーを探します。
4. マーカーをドラッグして焦点の位置を調整します。

カバーメディアとして動画をアップロードした場合は、動画のサムネイルとして使用するポスター画像を設定することもできます。

カバーブロックの上部または下部にウェーブスタイルを適用するには、次の手順に従ってください。

1. カバーブロックをクリックして選択します。
2. ブロック設定サイドバーで、スタイルアイコンをクリックします。スタイルアイコンは白黒の円のような形をしています。
3. 「下部ウェーブ」または「上部ウェーブ」をクリックして、ウェーブスタイルを適用します。
4. デフォルトをクリックしてウェーブスタイルを解除します。