配色
テーマ設定でさまざまなカラースキームを定義し、配色ピッカーを使用してそのカラースキームをオンラインストア全体のさまざまなセクションに適用できます。カラースキームとは配色のことです。テーマにはデフォルトのカラースキームセットがありますが、テーマエディタでいつでも変更することができます。ブランドカラーを追加して、オンラインストア全体に統一感のあるカラーパレットを適用することが可能です。
テンプレートには個別の色の設定がないため、オンラインストアのデザインはウェブサイト全体で一貫しています。テンプレートは、ストアのメインページまたはスメインコンテンツとみなされます。ストア全体でさまざまなカラースキームを使用すると、ユーザーエクスペリエンスが低下し、お客様が商品を購入せずにストアを離れる可能性があります。
カラースキームの設定などのセクションについては、オンラインストアの機能とページタイプを確認できます。
カラースキームのテーマ設定
カラースキームとは、視覚的に表現する仕方で要素とそのそれぞれの色をグループ化したテーマ設定です。配色ピッカーが利用可能なテーマ全体に適用できる統一感のあるカラースキームには、さまざまな要素に異なる色を割り当てることができます。最大21のカラースキームを利用できます。また、スキームプレビューで、選択した色がどのように表示されるかを確認することも可能です。
| 設定 | 説明 |
|---|---|
| 背景 | 色は、特定セクションの背景、アウトラインボタンの背景に適用されます。 |
| 背景のグラデーション | 色のグラデーションは、特定セクションの背景に適用されます。可能な場合は、背景の代わりにその背景グラデーションが適用されます。 |
| テキスト | 色は、セクションまたはブロックテキストに適用されます。 |
| ソリッドボタンの背景 | 色は、プライマリーボタンの背景に適用されます。 |
| ソリッドカラーのボタンのラベル | 色は、プライマリーボタンのテキストに適用されます。 |
| アウトラインボタン | 色は、サブボタンのテキストと枠線に適用されます。 |
| 影 | 色は、影に適用されます。 |
配色を管理する
ストアのカラースキームとカラーオプションは、テーマ設定内で設定します。ソリッドカラーを使用する場合は、カラーピッカーを使用して新しい色を選択するか、テキストフィールドに色の値を入力します。カラーフィールドでは、以下の色名と値を使用できます。
-
red、blackなどの色の名前blue - RGBカラーコード
- 16進数の色の値
手順:
管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
歯車アイコンをクリックしてから [色] をクリックします。
[スキーム] セクションで、既存のスキームをクリックするか、[スキームを追加] をクリックして新しいカラースキームを追加します。
変更するコンテンツタイプの色の色見本をクリックします。
色を設定するには、16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進コードを削除します。
[保存] をクリックします。
カラースキームを適用する
テーマ設定でカラースキームを定義した後、テーマのセクションとブロックに配色ピッカーを使用したカラースキームを割り当てることができます。配色ピッカーは、特定のセクション、ブロック、および一般的なテーマ設定でのみ利用可能です。
グラデーション
一部のテーマでは、色のグラデーションを設定して、視覚的に興味をひく背景オプションを作成できます。color_backgroundの設定は、CSS背景プロパティをカスタマイズするために使用されます。
グラデーションピッカーを使用すると、グラデーションの色、グラデーションスタイル、角度、位置、不透過率を選択できます。グラデーションピッカーで選択したオプションは、テーマエディタでリアルタイムにプレビューされます。検証チェッカー機能を含むCSSコードを使用して、グラデーション背景を作成することもできます。
グラデーションを設定する
管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
歯車アイコンをクリックしてから [色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
グラデーションの色見本オプション ([背景のグラデーション] など) をクリックします。
これまでグラデーションを設定したことがない場合は、いくつかのプリセットオプションが表示され、そこから選択できます。グラデーションのプリセットを選択して、オプションパネルを開きます。
-
以下のグラデーションオプションを選択します。
- 直線または放射状のグラデーションを、目的に応じてボタンで選択します。
- グラデーションの角度は、上下の矢印で設定します。上や下の矢印をクリックすると、角度のパーセンテージが5ずつ増減します。
- スライダーを使用してグラデーションの位置を選択するか、フィールドに数値を入力します。
- 特定の色の16進コードを入力するか、カラースライダーを使用して色調を選択します。最近選択した色は、グラデーションオプションのパネル下部に表示されます。
- グラデーションを不透明にする場合は、右側のスライダーを使用してグラデーションの透明度を選択します。16進カラーコードの横にあるフィールドに、パーセンテージを入力することもできます。
[保存] をクリックします。
CSSを使用してグラデーションを設定する
ほとんどのCSSbackgroundプロパティ値は、背景色を設定する際に使用できます。このフィールドでは、ソリッドカラー (たとえば、#000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0, 0%, 0%)、hsla(0, 0%, 0%, 1)は、黒のソリッドカラーの背景を生成します)、またはグラデーション (たとえば、linear-gradient(red, green)、radial-gradient(red, green)、conic-gradient(red, green)) を使用することができます。グラデーションを繰り返し使用することも可能です。
手順:
管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
歯車アイコンをクリックしてから [色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
編集するグラデーションをクリックします。
[グラデーション] の横にある矢印をクリックして [CSS] を選択します。
[CSSコード] フィールドに、グラデーションコードを入力または貼り付けます。テーマエディタのプレビューでは、グラデーションが適切な位置に表示されます。
[保存] をクリックします。
グラデーションを削除する
管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
歯車アイコンをクリックしてから [色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
削除するグラデーションをクリックします。
[グラデーションを削除] をクリックします。
[保存] をクリックします。