サイトのパレットを選択し、特定のエレメントの色をカスタマイズできます。

白黒のテーマから大胆な色の組み合わせまで、カラー パレットとカラー テーマを使用してサイト全体の色をスタイリングできます。

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

サイトの色の変更に関する動画

この動画では、サイトのカラー パレットとカラー テーマについて詳しく解説しています。

サイト全体のカラー パレットで色を変更する

Squarespaceのすべてのサイトは、統一感のあるビジュアルスタイルを実現するために、5色のカラーパレットを使用しています。パレットをカスタマイズするか、新しいパレットを選択すると、パレットの色がサイト全体に適用されて、サイトの色をすぐに変更できます。

現在のカラー パレットを編集する

選択したカラー パレットを編集する手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. [パレットを編集] をクリックします。パレットでは5色が使用されています。そのほとんどには黒と白が含まれており、テキストに使用されます。
4. パレットの色のいずれかをクリックし、カラー ピッカーのスライダーをクリックしてドラッグすると、色を変更できます。使用したい色のコードがある場合は、下のフィールドに16進カラー コード、RGB、またはHSLコードを入力できます。
5. パレットの各色に対してこれらの手順を繰り返し、[保存] をクリックします。

新しいカラー パレットを設定する

新しいカラー パレットを設定する手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. [パレットを編集] をクリックして、次の項目を選択します。
   • プリセット - 厳選された色のプリセット パレットのセットから選択します。
   • 画像から - 画像をアップロードして、画像の最も目立つ3色を基にしたパレットを生成します。
   • 色から - カラー ピッカーを使用して基本とする色を選択し、その色を補完するパレットを生成します。
4. [保存] をクリックします。

テーマでセクションの色を変更する

カラー パレットではサイトの色を設定し、サイトのカラー テーマではそれらの色を様々な組み合わせで使用します。各カラー パレットには10種類のカラー テーマがあるため、統一感を保ちながらセクションごとに独自の外観を設定できます。

場合によっては、背景色とのコントラストを高めるために、テキストとボタンの色が既定で白または黒になることがあります。色を選択する際は、アクセシビリティのベスト プラクティスを確認してください。

セクションのテーマを設定する

セクションのカラー テーマを選択する手順は以下のとおりです。

1. [ページパネル] を開きます。
2. 編集するページをクリックし、左上にある [編集] をクリックします。
3. 変更するセクションの [セクションを編集] をクリックします。
4. [色] をクリックし、カラー テーマをクリックします。
5. [保存] をクリックします。

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

ページのセクションで使用されているテーマを確認するにはどうすればよいですか？

セクションで使用されているカラー テーマを確認する手順は以下のとおりです。

1. [ページパネル] を開きます。
2. 編集するページをクリックします。
3. サイト プレビューをスクロールし、各セクションの右上隅に表示されるカラー テーマ ラベルを確認します。

カラー テーマのラベルが空白なのはなぜですか？

テーマのラベルではなく空のボックスが表示される場合は、フォントの色と背景色が同じで、テキストが見えなくなっている可能性があります。テーマのラベルを見えるようにする手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. [色] メニューで空白になっているテーマをクリックします。
4. 見出し (大) をクリックし、色を変更します。
5. [保存] をクリックします。

サイトの他のエリアではどのテーマが使用されていますか？

サイトの他の領域には、固有のカラー テーマ設定があります。

• お知らせバー - サイトのヘッダーにカラー テーマが設定されている場合、お知らせバーでも同じテーマが使用されます。それ以外の場合は、既定のカラー テーマが使用されます。
• 組み込みページ - 既定の404ページやショッピング カート ページなどの組み込みサイト ページでは、テンプレートの既定のカラー テーマが使用されます。
• モバイル オーバーレイ メニュー ボタン -サイトのヘッダーを編集すると、モバイル オーバーレイのカラー テーマを設定できます。
• サイト ヘッダー - サイト ヘッダーのカラー テーマを設定するか、カスタム カラーを設定できます。

特定のサイト エレメントの色を変更する

任意のカラー テーマで、特定のエレメントの色の微調整オプションをカスタマイズできます。テーマの色に加えられた変更は、そのテーマを使用しているサイトの全エリアに適用されます。

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

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. 編集するテーマをクリックします。編集が必要なテーマがわからない場合は、変更するセクションでカラー テーマのラベルを探します。
4. 変更する微調整オプションをクリックして、新しい色を選択します。[パレット] タブからプリセット カラーを使用したり、[カスタム] をクリックしてカラー ピッカーを使用したりできます。
5. 保存する前に変更を取り消すには、パネル上部の元に戻すアイコンをクリックするか、固有の微調整オプションの横にあるドットをクリックします。
6. 他のページのコンテンツを編集する間も、変更はそのまま保持されます。[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

カラー ピッカーを使用してカスタム カラーを選択する

すべての色の微調整オプションのラベルの横には、そのエレメントの現在の色を示す円が表示されます。通常、これらの色はサイトのパレットからのものです。

カラー ピッカーでカスタム カラーを選択する手順は以下のとおりです。

1. 変更する微調整オプションをクリックします。
2. [カスタム] をクリックして、カラー ピッカーを開きます。
3. 下のスライダーをクリックして色を選択し、上の四角をクリックして色合いを選択するか、値フィールドを使用して特定のカラーコードを入力します。
4. 微調整オプションに不透明度スライダーがある場合は、それを使用して透明度を変更できます。

色コードを指定して特定の色を選択する

希望する色の値がわかっている場合は、カラー ピッカーの下にある値フィールドをクリックしてその値を追加できます。特定の色の値を見つけるには、color-hex.comやimagecolorpicker.comなどの外部サイトにアクセスしてください。

値フィールドには、以下のいずれかの形式を指定できます。

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

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

色の透明度を変更する

カスタム色の透明度を変更するには、不透明度スライダーを使用します。カラー ピッカーの下の円をドラッグしてください。不透明度スライダーは、画像の上に重ねるオーバーレイ色を調整するのに特に役立ちます。すべての微調整オプションに不透明度スライダーが含まれているわけではありません。

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

既定のカラー テーマとは何ですか？

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

• アクセス拒否画面
• お知らせバー
• 組み込み検索ページ
• 既定の404ページ
• 背景画像または動画上の動的ヘッダー
• 注文確認ページ
• ページの端を超えて横向きにスクロールすることによって発生するページのギャップ
• 商品クイック ビュー ページ
• ショッピング カート ページ

サイトの既定のカラー テーマを見つけるにはどうすればよいですか？

テンプレートの既定のテーマを見つけるには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. ページ上で [編集] をクリックし、[セクションを追加] をクリックします。
3. [+ 白紙を追加] をクリックし、[セクション] をクリックします。新しいセクションは既定のテーマで開始されます。
4. ペイントブラシアイコンをクリックして [サイト スタイル] パネルを開き、[色] の横にある [＞]をクリックします。
5. 新しいセクションでテーマのラベルを探します。

サイトの既定のテーマを変更できますか？

いいえ。サイトに新しい既定のテーマを割り当てることはできません。ただし、既定のテーマがわかっている場合は、カラー パレットを変更するか、テーマの個別のカラー微調整オプションを変更して、組み込みページや既定のテーマを使用するその他のセクションをカスタマイズできます。

ページ セクションとフッターの間の色を変更するにはどうすればよいですか？

ページの最後のセクションとフッターの間、またはフッターの下に隙間が生じることがあります。これらの隙間には、既定のテーマのセクションの背景色が使用されます。セクションとフッターで既定とは異なるカラー テーマを使用している場合、これらの隙間が目立ちやすい場合があります。

隙間の色をページ セクションまたはフッターに合わせる手順は以下のとおりです。

1. [サイト スタイル] パネルを開きます。
2. [色] の横にある [＞] をクリックします。
3. 既定のテーマをクリックします。
4. [背景色] をクリックし、ページ セクションまたはフッターのカラー テーマのセクションの背景色と一致するように変更します。

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

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

一部のブロックには背景色を追加できます。これは、ブロックを目立たせたり、創造エディターで重なっているブロックをより見やすくしたりするのに最適です。

次のブロックに背景色を追加できます。

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