ブランドに合わせて、ボタンの形状や色、テキストのスタイルを変更しましょう。

サイト スタイルを使用すると、サイト上のボタンの外観を編集して、コール トゥ アクションをサイトのビジュアル デザインに合わせられます。外観の一貫性を確保するため、スタイルの変更はサイト上のほとんどのボタンに反映されます。

これらのボタンのスタイルはバージョン7.1サイトで使用できます。バージョン7.0サイトには異なるボタン スタイル設定オプションがあります。

ボタンのスタイルに関する動画

この動画では、サイト上のボタン スタイル設定の概要をご紹介しています。

ボタン パックを選択する

サイト スタイルでは、ボタン パックを選択すると、サイト上のボタンに一貫したスタイル設定を自動的に適用できます。各パックでは、ボタンのスタイルが3種類に分類されています。

ボタンパックは、より細かい設定を手動で変更したくない場合に非常に便利ですが、さらにカスタマイズする前の出発点として使用することもできます。

ボタン パックを設定する手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [ボタン] をクリックします。
3. おすすめのボタン パックを確認します。パックにカーソルを合わせると、プライマリ、セカンダリ、ターシャリのスタイルのプレビューが表示されます。
4. おすすめのボタン パックから選択するか、[カスタマイズ] をクリックしてから、[すべてのボタン パック] をクリックすると、さらに多くのオプションを確認できます。
5. 気に入ったボタン パックが見つかったら、それをクリックします。

ボタンの形状とフォントをカスタマイズする

ボタン パックを選択した後、ボタン スタイルのオプションをさらに細かく変更できます。特定のサイズや形状を設定できますが、ボタンはテキストに合わせてサイズが大きくなり、形状が変わる場合があります。最大限にコントロールできるように、ボタン テキストは25文字以内にすることをおすすめします。

特定の微調整オプションがサイトのデザインに支障をきたす可能性がある場合、その微調整オプションは特定のボタンに影響しないことがあります。たとえば、ニュースレター ブロック レイアウトを維持するために、パディングの微調整オプションはニュースレター ブロック ボタンには影響しません。

ボタンのスタイルを設定する手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [ボタン] の横にある [＞] をクリックします。
3. [プライマリ]、[セカンダリ]、または [ターシャリ] をクリックします。変更を加えると、このタイプのボタンがサイトでどのように表示されるかがプレビューに表示されます。ボタン タイプを変更した後で新しいボタン パックを選択すると、変更内容は失われますのでご注意ください。
4. テキスト スタイルをカスタマイズするには、[フォント] をクリックします。
5. ボタンの形状を設定するには、[図形] をクリックします。
6. [外枠] スライダーを使用して、外枠の太さを設定します。
7. パディングを [S]、[M]、[L] のいずれかに設定するか、[...] をクリックして、[上と下] のパディングと [左と右] のパディングを個別に設定します。この設定は、創造エディター セクションで [塗りつぶし] に設定されているボタン ブロックには影響しません。代わりに、ブロックのサイズを変更してパディングを追加します。
8. 任意: これらのスタイル設定をサイト上のすべてのボタン タイプに適用するには、[すべてのボタン タイプに適用] をクリックします。
9. 任意: 編集中のボタン タイプのスタイルを既定値にリセットするには、[ボタンのスタイルをリセット] をクリックします。
10. [保存] をクリックします。

ボタンの色をカスタマイズする

ボタンはサイト全体の配色に準拠するため、一般的にサイトのブランドイメージと調和します。セクションごとに異なるカラー テーマを使用すると、より幅広いボタンカラーを利用できます。

ボタンの色を変更する手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. ボタンの色を変更する場所のカラー テーマをクリックします。
4. [ボタン] で微調整オプションをクリックし、3種類すべてのボタンタイプのボタン テキストの色とボタン背景色を変更します。[塗りつぶし] に設定されているボタンでは、背景色でボタンが塗りつぶされます。[塗りつぶしなし] に設定されているボタン、または [下線] 図形を使用しているボタンでは、ボタンの背景色が外枠とテキストに適用されます。
5. 任意: ブロックにボタンがある場合、ボタンの色を個別に変更できることがあります。[カラー テーマの編集] パネルでは、ブロック セクションでブロック固有のボタンの色の微調整オプションを確認できます。
6. [保存] をクリックします。

ボタンのタイプとは何ですか？

サイト スタイルでは、ボタンが [プライマリ]、[セカンダリ]、[ターシャリ] の3種類に分類されています。ほとんどのボタンはプライマリ スタイルに従っており、タイプは変更できません。

ボタン ブロック、ヘッダー ブロック、フォーム ブロック送信ボタンのタイプは変更できます。これは、訪問者にとって最も重要なコール トゥ アクションを強調したり、様々な種類のリンクを区別したりするのに最適な方法です。

どのボタンがプライマリ スタイルを使用しますか？

プライマリ スタイルを使用するボタンには、以下のものがあります。

• [カートに追加] ボタン
• 自動レイアウト ボタン
• [プライマリ] に設定されているヘッダー ボタン、ボタン ブロック、フォーム ブロック ボタン
• 精算ボタン
• Cookieバナーの [すべて許可] ボタン
• 寄付ブロック ボタン
• 料金プラン ブロックのボタン
• ニュースレター ブロック ボタン

どのボタンがセカンダリ スタイルを使用しますか？

セカンダリ スタイルを使用するボタンには、以下のものがあります。

• [セカンダリ] に設定されているヘッダー ボタン、ボタン ブロック、フォーム ブロックボタン
• [買い物を続ける] ボタン
• Cookieバナーの [すべて拒否] ボタン

どのボタンがターシャリ スタイルを使用しますか？

• [ターシャリ] に設定されているヘッダー ボタン、ボタン ブロック、フォーム ブロック ボタン
• Cookieバナーの [Cookieを管理] ボタン