サイトのカラー パレットを選択し、ページ セクションごとに固有の色を適用します。

サイト スタイルとセクション スタイルを使用して、サイトの色を白黒テーマや大胆な色の組み合わせなどに変更できます。

このガイドでは、サイト上のさまざまなエレメントの色を変更する方法の概要を説明します。

動画を見る

始める前に

• サイト スタイルで行った色の変更はサイト全体に適用されます。ボタンのテキストなど、ページの1つのエレメントを変更すると、そのテーマを使用するすべてのエリア (バージョン7.1)、またはすべてのページ (バージョン 7.0) で変更が行われます。
• バージョン7.1 のテキスト ブロックでは、文内の1つの文字や単語など、テキストの特定の部分の色を変更できます。バージョン 7.0 またはその他のテキスト エリアでこれを行うには、マークダウン ブロックを使用します。
• コーディングの経験をお持ちの場合は、CSS を使用してターゲットを絞った色の変更を試してみることをおすすめします。ただし、カスタム コードはサポートの範囲外となりますのでご注意ください。
• サイトがバージョン 7.0 の場合、色を変更するプロセスは異なります。具体的な手順については、下記のセクションを参照してください。
• サイトに最適な色を選択するためのヒントについては、「適切なフォントと色を選ぶ」を参照してください。
• アクセシビリティのベスト プラクティスを確認するには、「アクセスしやすいサイト コンテンツを作成する」を参照してください。

サイト全体の色を変更する

サイト上のすべての色を変更するには、カラー パレットを以下から1つ選択します。

1. ページの編集中に、右上隅にあるペイントブラシ アイコンをクリックし、[色] をクリックします。
2. [パレットを編集] をクリックして、新しいカラー パレットを選択します。次のカラー パレットのタイプから選択できます。
   • プリセット - 厳選された色のプリセット パレットのセットから選択します。
   • 画像から - 画像をアップロードして、画像の最も目立つ色を基にしたパレットを生成します。
   • 色から - カラー ピッカーを使用して基本とする色を選択し、その色を補完するパレットを生成します。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

以下の点に留意してください。

• すべてのパレットには、一般的にテキストに使用される黒と白が常に含まれています。
• 画像からパレットを生成すると、画像の最も主要な3つの色から色が抽出されます。
• どのパレットでも、[パレット エディター] を使用してパレットの各色をカスタマイズできます。

セクションの色を変更する

カラー パレットは、ページ セクションにさまざまなカラー テーマを生成します。サイト全体の色を設定した後、セクションのカラー テーマを変更して、セクションの見た目に個性を与えることができます。

セクションが使用しているテーマを確認するには、次の手順に従ってください。

1. ページの編集中に、ペイントブラシ アイコンをクリックし、[色] をクリックします。
2. ページ プレビューをスクロールし、各セクションでセクションのテーマのラベルを確認します。

注: テーマのラベルではなく空のボックスがセクションに表示される場合は、[見出し (大)] の色がセクションの背景色と同じ色に設定されている可能性があります。テーマのラベルを表示するには、同じく色メニューで空になっているテーマをクリックし、[見出し (大)] を新しい色に変更します。詳細な手順については、次のセクションを参照してください。

セクションのカラー テーマを変更するには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. 編集するページを選択し、左上隅の [編集] をクリックします。
3. 変更するセクションの [セクションを編集] または鉛筆アイコンをクリックします。
4. [色] タブで、テーマをクリックしてそのセクションに適用します。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

注: セクションのカラー テーマを変更すると、テキスト ブロック ツールバーで行われたテキスト色の変更を含め、そのセクションのすべての色がリセットされます。

テーマの種類

テーマの種類 (1 または 2) は、セクション内のメイン テキストに適用される色と、他のエレメントに適用される色を制御します。

• 最も明るい 1、明るい 1、暗い 1、および最も暗い 1 - テキストと見出しは黒または白となり、他の色は背景と小さいサイト エレメントに適用されます。
• 最も明るい 2、明るい 2、暗い 2、最も暗い 2 - パレットの左側の色はすべてのテキストと見出しに適用され、他の色は背景と小さいサイト エレメントに適用されます。
• 明るい - パレットの左側の色はテキスト (明るい 1) または背景 (明るい 2) のいずれかに適用され、他の色は背景と小さいサイト エレメントに適用されます。

場合によっては、背景色とのコントラストを高めるために、テキストとボタンの色が既定で白または黒になることがあります。

他のサイト エリアのテーマ

サイトのこれらの領域のカラー テーマを見つけるには、次の手順に従ってください。

• お知らせバー - お知らせバーは常にヘッダーのカラー テーマと一致します。
• モバイル オーバーレイ メニュー ボタン -モバイル オーバーレイの色はヘッダーで設定されます。
• セクションの背景 - [色] パネルを開いてテーマのラベルを探し、該当するテーマをクリックしてすべての色を開きます。[セクションの背景] の隣にある色を探します。
• 組み込みページ - 既定の 404 ページ、ショッピング カート ページ、注文確認ページ、組み込み検索ページはすべて、テンプレートの既定のカラー テーマを使用します。

テーマの色をカスタマイズする

さまざまなサイト エレメントに固有の色を設定することで、テーマをさらにカスタマイズできます。テーマの色に加えられた変更は、そのテーマを使用しているサイトのすべてのエリアに適用されます。

テーマを編集するには、次の手順に従ってください。

1. ページの編集中に、ペイントブラシ アイコンをクリックし、[色] をクリックします。
2. 編集するテーマをクリックします。
3. 変更する微調整オプションをクリックして、新しい色を選択します。[パレット] タブからプリセット カラーを使用したり、[カスタム] をクリックしてカラー ピッカーを使用したりできます。すべての微調整オプションを確認するには、スクロールする必要がある場合があります。
4. 不透明度スライダーを使用して、透明度を変更します。
5. 保存する前に変更を取り消すには、パネル上部の元に戻すアイコンをクリックするか、固有の微調整オプションの横にあるドットをクリックします。

他のページのコンテンツを編集する間も、変更はそのまま保持されます。[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

テーマの色を変更する際は、次のヒントに留意してください。

• 編集が必要なテーマがわからない場合は、変更するページのエリアでカラー テーマのラベルを探します。
• [テーマを編集] メニューには、現在編集中のページにこれらの項目が含まれていない場合でも、サイトで可能なすべての色の微調整オプションが表示されます。例えば、レイアウト ページを編集していても、すべてのブログの色オプションが表示されます。
• セクションに背景画像がある場合は、[背景オーバーレイ] 微調整オプションを使用して、オーバーレイの色の不透明度を設定します。セクションに背景色または動画が使用されている場合は、[セクションの背景] を使用して背景色を設定します。

カラー ピッカー

カラー ピッカーを使用して、サイトのエレメントのカスタム カラーを選択します。すべての色の微調整オプションのラベルの横には、そのエレメントの現在の色を示す円が表示されます。

新しい色を選択するには、変更する微調整オプションの横にある色の円をクリックします。下のスライダーをクリックして色を選択し、上の四角をクリックして色合いを選択します。

希望する色の値がわかっている場合は、値フィールドをクリックして編集することもできます。値フィールドには、以下のいずれかの形式を指定できます。

• HEX - 例: #FFFFFF
• RGB または RGBa - 例: rgba(255, 0, 149, 1)
• HSL/HSLA - 例: hsla(325, 100%, 50%, 1)
• HTML (小文字である必要があります) - 例: white

特定の色の値を見つけるには、color-hex.com や imagecolorpicker.com などの外部サイトにアクセスしてください。

ヒント: カラー スライダーを使用して色を調整すると、値フィールドに自動的に入力されます。このコードをコピーして貼り付けると、テーマ内の他の微調整オプションに同じ色を追加できます。

透明度

色の透明度を変更するには、不透明度スライダーを使用します。カラー ピッカーの下の円をドラッグしてください。不透明度スライダーは、画像の上に重ねるオーバーレイ色を調整するのに特に役立ちます。

• バージョン7.1 では、パレットの色の透明度のみを変更できます。
• バージョン 7.0 では、一部の色の微調整オプションに不透明度スライダーが含まれていません。

ヒント: 不透明度スライダーを使用してセクションの背景色を透明にすると、テンプレートの規定のカラー テーマの背景色が透けて見えることがあります。

はめ込みの境界線の色を変更する

セクションに背景画像がある場合は、画像を [フル ブリード] または [はめ込み] で表示できます。

• [フル ブリード] は、サイトの幅いっぱいに、ブラウザー ウィンドウの一方の端からもう一方の端まで画像を広げます。
• [はめ込み] を選択すると、画像が少しインデントされ、画像の周囲に境界線が生成されます。

画像が [はめ込み] に設定されている場合、境界線の色を変更できます。

1. ページの編集中に、ペイントブラシ アイコンをクリックし、[色] をクリックします。
2. 変更するセクションのカラー テーマをクリックします。
3. [サイト全体] の [はめ込みの境界線] をクリックし、色を選択します。
4. 他のページのコンテンツを編集する間も、変更はそのまま保持されます。[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

ブロックの背景色を変更する

ブロックの背景色は、バージョン7.1 サイトにのみ対応しています。

一部のブロックには、背景色機能が含まれています。これは、ブロックを目立たせたり、創造エディターで重なっているブロックをより見やすくしたりするのに最適です。ブロックの [デザイン] タブの [背景] トグルをオンに切り替えて、以下のブロックに背景色を追加します。

• アコーディオン ブロック
• フォーム ブロック
• ニュースレター ブロック
• 引用ブロック
• 要約ブロック

また、テキスト ツールバーのブロック背景アイコンをクリックして、テキスト ブロックの背景色を有効にすることもできます。

背景を有効にしたら、[色] をクリックしてサイトのカラー パレットまたはカスタム色から色を選択します。背景色が一致するブロックを作成するか、各ブロックに固有の色を配色します。

既定のカラー テーマ

すべてのバージョン7.1テンプレートには、既定のカラー テーマがあります。このテーマは、サイト上の以下の組み込みページおよびエリアに自動的に適用されます。

• アクセス拒否画面
• お知らせバー
• 組み込み検索ページ
• 既定の 404 ページ
• 背景画像または動画上の動的ヘッダー
• 注文確認ページ
• 商品クイック ビュー ページ
• 背景画像または動画を含むセクション
• ショッピング カート ページ

サイトのこれらのエリアに別のテーマを割り当てることはできませんが、既定のテーマを変更してこれらのページをカスタマイズすることはできます。テンプレートの既定のテーマを見つけるには、次の手順に従ってください。

1. ページに空のセクションを追加します。
2. [サイト スタイル] パネルを開きます。
3. [色] をクリックして、テーマのラベルを探します。新しいセクションには既定のカラー テーマが割り当てられます。

ヒント: 既定のカラー パレットは、システム ページのいずれかを開き、/キーを押してサイト スタイルを検索しても設定できます。[カラー] パネルにアクセスし、そこからテーマ インジケーターを確認できます。

ページ セクションとフッターの間隔

セクションが1つしかないページや、非常に短いページでは、ページ セクションの末尾とページのフッターの間に隙間が生じることがあります。ギャップは、既定のテーマのセクションの背景色を継承します。

セクションとフッターで既定とは異なるカラー テーマを使用している場合などは、見た目がチグハグになることがあります。

これを修正するには、既定のテーマのセクションの背景色の設定を、ページ セクションまたはフッターのテーマのセクションの背景色と一致するようにします。

ヒント: 既定のテーマのセクションの背景色とページの背景色を一致させると、ページが読み込まれたときに調和のとれた外観になります。背景色は画像の前に読み込まれます。

バージョン 7.0 で色を変更する

サイトがバージョン 7.0 の場合、サイトの色を変更するプロセスは異なります。

ヒント: カバー ページには独自のスタイル オプションがあります。

[デザイン] パネルを開き、[サイト スタイル] をクリックして、スタイル微調整オプションでサイトの色を手動で設定します。微調整オプションは、サイトのテンプレートによって異なります。サイトの色の変更の詳細については、テンプレートのガイドを参照してください。

バージョン 7.0 サイトの色を変更するには、まず変更を加えるページに移動します。一部の微調整オプションは、影響を受けるページを開いているときにのみ表示されるため、編集中のページに移動すると、そのページ用の微調整オプションが表示されます。選択したページでスタイルの編集を行っているときに、その編集をプレビューすることもできます。

ページ上のエレメントの固有の微調整オプションを見つけるには、プレビューでそのエレメントをクリックします。サイト スタイルは、そのエレメントのスタイル微調整オプションのみが表示され、残りは非表示になります。このショートカットは、サイトのほとんどのテンプレートとほとんどのエリアで使用できます。[すべて表示] をクリックすると、そのページのすべての微調整オプションが再度表示されます。

サイトの色を変更するには、次の手順に従ってください。

1. [ページ] パネルを開き、変更するページをクリックします。
2. サイト プレビューに正しいページが表示されたら、[Webサイト] パネルに戻ります。
3. [デザイン] をクリックし、[サイト スタイル] をクリックします。
4. 下にスクロールして、表示しているページで利用可能な微調整オプションをすべて確認します。変更する微調整オプションをクリックして、新しい色を選択します。
5. 不透明度スライダーを使用して、透明度を変更します。
6. カラー ウィンドウの外側の任意の場所をクリックして、カラー ピッカーを閉じます。
7. 保存する前に変更を取り消すには、パネル上部の元に戻すアイコンをクリックするか、固有の微調整オプションの横にあるドットをクリックします。
8. パネルの上部の [保存] をクリックします。

背景色を変更する

これらのテンプレート ファミリーには、以下のようなカスタマイズ可能な背景エリアがあります。

テンプレート ファミリー	背景エリア
Adirondack	サイト キャンバス ナビゲーション バー ヘッダー
Avenue	サイト キャンバス
Aviator	サイト キャンバス ヘッダー/フッター
Bedford	サイト ヘッダー プレフッター フッター
Brine	サイト キャンバス 境界線 上部ヘッダー フッター モバイル バー
Farro	サイト 境界線 ヘッダー フッター モバイル バー
Five	サイト キャンバス キャンバスの境界線 ヘッダー ナビゲーション
Flatiron	サイト ヘッダー/フッター
Forte	サイト
Galapagos	サイト ヘッダー
Ishimoto	サイト ページの境界線
Momentum	サイト キャンバス ナビゲーション
Montauk	サイト キャンバス
Native	サイト
Pacific	サイト ヘッダー インデックス入れ替えセクション プレフッター フッター
Skye	サイト
Supply	サイト ヘッダー/サイドバー ナビゲーション
Tremont	サイト ナビゲーション オーバーレイ インデックス
Wells	サイト
Wexley	サイト モバイル ナビ
York	サイト バナー

以下の点に留意してください。

• テンプレートを切り替えても背景色は移行しません。
• 一部のテンプレートは背景画像もサポートしています。
• テンプレートによっては、ヘッダーの後ろにバナーが表示されることがあります。
• ログインすると、ページを読み込むときに、サイト スタイルで選択された色に関係なく背景が白色で表示されます。これは訪問者には表示されません。

詳細については、テンプレートのガイドを参照してください。

動画を見る

この動画はバージョン 7.0 に適用されます。