ブランドに合うように、サイトのボタンをカスタマイズします。

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

動画を見る

このガイドでは、バージョン7.1のボタンのスタイル オプションを取り上げます。バージョン7.0でのボタンのスタイル設定については、「バージョン7.0のボタンのスタイル」を参照してください。

ボタンの形状とフォント

ボタンのスタイルを設定するときは、ボタンのあるページを開くことをおすすめします。これにより、変更を加えたときにサイト プレビューで変更を確認できます。サイト全体のボタンのスタイルを設定するには、以下の手順に従います。

1. [サイト スタイル] パネルを開き、[ボタン] の横にあるをクリックします。
2. スタイルを設定するボタンのタイプ ([プライマリ]、[セカンダリ]、[ターシャリ]) をクリックします。詳細については、「ボタンのタイプ」を参照してください。

タイプごとに次の微調整オプションを設定できます。

• テキスト - その階層内のボタンのフォントとフォント スタイル。
• 図形 - 図形。また、ボタンに色の塗りつぶしがあるか ([塗りつぶし]) 外枠のみ ([塗りつぶしなし]) かを指定します。
• 外枠 - [塗りつぶしなし] ボタンの場合、ボタンの外枠のの太さ。[塗りつぶし] ボタンの場合、外枠スライダーを変更すると、ボタンの外側のパディングが変更されます。
• 左右のパディング - ボタン テキストの左右のパディング。
• 上下のパディング - ボタン テキストの上下のパディング。この微調整オプションは、創造エディター セクションで [塗りつぶし] に設定されているボタン ブロックには影響しません。ブロックのサイズを変更して、代わりに上下のパディングを追加します。

変更内容は自動的に保存されます。あるタイプの設定を他のタイプに適用するには、[すべてのボタン タイプに適用] をクリックします。あるタイプのスタイルを既定の設定にリセットするには、[ボタンのスタイルをリセット] をクリックします。

一般的な図形とサイズのスタイルを設定できますが、すべてのボタンはテキストに合わせてサイズが大きくなり、形も変わることに注意してください。ボタンのテキストが長くなると、予想とは異なる表示になることがあります。ボタンの外観を最大限にコントロールできるように、ボタンのテキストは25文字以下にすることをおすすめします。

ボタンの色

ボタンがサイトのデザインに合うように、ボタンはサイトのグローバル カラーに従います。

• テーマの鉛筆アイコンをクリックして、[色] パネルでボタンの背景とボタンのテキストの色を設定します。
• 各ボタン タイプには、各カラー テーマでの背景色とテキスト色に関する独自の微調整オプションがあり、ブロックには独自のボタン色微調整オプションがあります。
• ボタンが [塗りつぶし] に設定されている場合、ボタンはボタンの背景色で塗りつぶされます。ボタンが [塗りつぶしなし] に設定されている場合、ボタンの背景色が外枠とテキストに適用され、カーソルを合わせるとボタンが塗りつぶされます。
• [下線] 図形を使用する場合は、[ボタンの背景] 微調整オプションでボタンのテキストの色を設定します。[ボタンのテキスト] 微調整オプションでボタンの背景色を設定します。
• ボタンがあるセクションのカラー テーマを変更すると、他のセクションで異なるボタンの色を使用できます。

詳細については、色を変更するをご参照ください。

ボタンのタイプ

[ボタン] パネルでは、ボタンのスタイルが [プライマリ]、[セカンダリ]、[ターシャリ] の3種類に分類されています。ヘッダー ボタン、ボタン ブロック、フォーム ブロック送信ボタン以外に、ボタンのタイプは変更できません。ほとんどのボタンはプライマリ スタイル設定に従いますが、セカンダリおよびターシャリ設定を使用してサイト全体のボタン ブロックのスタイルを変えることができます。

これは、訪問者にとって最も重要なコール トゥ アクションを強調したり、さまざまな種類のリンクを区別したりするのに最適な方法です。以下の表を使用して、どのタイプがどのボタンに適用されるかを確認してください。

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

ボタン ブロックのタイプを設定する方法については、「ボタン ブロック」をご覧ください。

バージョン7.0でボタンのスタイルを設定する

サイトがバージョン7.0の場合、次のサイト全体の微調整オプションを使用して、サイト上のほとんどのボタンの外観を編集できます。

1. ボタンを使用するページに移動します。
2. [Webサイト] パネルに戻り、[デザイン]、[サイト スタイル] の順にクリックします。
3. [ボタン] まで下にスクロールします。ボタン ブロックの場合、このセクションはボタン ブロック (小)、(中)、または (大) と呼ばれます。

次の微調整オプションを使用します。

• ボタン スタイル - [単色]、[外枠]、[上寄り] のいずれかを選択します。[外枠] の場合、テキストにカーソルを合わせると、ボタンの色に応じて、自動的に黒または白で表示されます。
• ボタンの形状 - [正方形]、[丸形]、[カプセル] のいずれかを選択します。
• ボタンの色 - ボタンの背景色を変更します。
• ボタンのテキストの色 - テキストの色を変更します。
• ボタンのフォント - フォントを変更します。フォーム ブロックとニュースレター ブロック ボタンのテキストサイズを変更することはできません。
• 代替または (オーバーレイ) - 一部のテンプレートで使用できます。背景画像または背景色でボタンが目立つように代替色を設定できます。

サイト全体の微調整オプションは、次のボタンに影響します。

• [カートに追加] ボタン
• ボタン ブロック
• 寄付ブロック ボタン
• フォーム ブロック送信ボタン
• ニュースレター ブロック ボタン
• メンバー登録ブロック ボタン

複数のスタイル オプションを持つボタンが数種類あります。

• [ショッピング カート] ボタンには、テンプレートによっては個別のオプションがあります。
• [カバー ページ] ボタンには個別のボタン オプションがあります。
• 画像ブロックには個別のボタン オプションがあります。
• Bedfordファミリーのバナーのボタンは、[バナー] セクションでスタイルを設定します。
• Bedfordファミリーのヘッダー ナビゲーションのボタンは、[サイト ナビゲーション] でスタイルを設定します。
• Brineファミリーのヘッダー ナビゲーションのボタンは、[ヘッダー: メイン ナビゲーション] および [ヘッダー: セカンダリ ナビゲーション] でスタイルを設定します。