バナーをデザインする
背景、色、余白、閉じるボタン、バー全体のリンク化を設定します。
Design パネルは、ビルダーのレールにあるブラシアイコンです。要素そのもの以外の、バーの見た目に関するすべてを設定します。
Designの設定は、1つの要素ではなく、バー全体に適用されます。
背景のスタイルは3種類です。
| スタイル | 設定する内容 |
|---|---|
| Solid | 1色 |
| Gradient | 開始色、終了色、角度 |
| Image | バー全体を覆う画像 |
| 設定 | 適用範囲 |
|---|---|
| Font | 書体。バー専用の書体が必要な場合を除き、テーマのフォントのままにしてください。 |
| Text | バーの文字色 |
| Accent | ボタン、割引コード、カウントダウン(個別に色を指定した場合を除く) |
押さえておきたいのはAccentです。一度設定すると、ボタン、コードの枠線、タイマーがすべてそれに従います。要素に独自の色を指定すると、その要素は従わなくなります。
閉じるボタンとリンク
Section titled “閉じるボタンとリンク”どちらも、お客様がバーを操作したときの動作に関する、別々の設定です。
閉じるボタン
Section titled “閉じるボタン”オンにすると、バーの端に × が表示されます。色とホバー時の色を設定できます。
お客様がバナーを閉じると、そのお客様には閉じたままになります。アプリがブラウザに記憶するため、次のページで再表示されることはありません。
バー全体をクリック可能にする
Section titled “バー全体をクリック可能にする”オンにすると、バーのどこをクリックしても、その下で設定したリンクが開きます。Open in a new tab をオンにすると、ストアを開いたまま別のタブでリンクが開きます。
バー内のボタンや割引コードをクリックした場合は、それぞれ本来の動作をします。バー全体のリンクがクリックを妨げることはありません。
バー内で要素をどのように配置するかを設定します。
| 設定 | 動作 |
|---|---|
| Alignment | 左揃え、中央揃え、右揃え、均等配置 |
| Gap between elements | 各要素の間隔 |
| Wrap on small screens | オンの場合、スペースが足りなくなると行が折り返されます。オフの場合は詰めて表示されるため、長いメッセージが切れることがあります。 |
Vertical padding はバーの高さです。Horizontal padding は両端の余白です。
薄いバーはお知らせとして読まれ、高いバーはページの一部として読まれます。ほとんどのお知らせバーには、薄いほうが向いています。
カスタムCSS
Section titled “カスタムCSS”パネルの最下部にある Custom CSS (Developer Zone) には、このバナーの中だけに適用されるルールを入力できます。テーマの他の部分には影響しません。
テキストの影、文字間隔、1つの要素だけ異なる枠線など、パネルでは設定できない項目に使います。