配色

オンラインストアでは、さまざまなカラースキームを作成してさまざまなセクションに適用することができます。カラースキームとは配色のことです。テーマにはデフォルトのカラースキームが適用されていますが、テーマエディタでいつでも変更することができます。ブランドカラーを追加すると、オンラインストア全体に統一感のあるカラーパレットを適用することが可能です。

カラースキームの設定

統一感のあるカラースキームを設定することにより、テーマ全体の各所にさまざまな色を適用することができます。最大21のカラースキームを利用できます。また、スキームプレビューで、選択した色がどのように表示されるかを確認することも可能です。

配色を管理する

ストアのカラースキームとカラーオプションは、テーマ設定内で設定します。ソリッドカラーを使用する場合は、カラーピッカーを使用して新しい色を選択するか、テキストフィールドに色の値を入力します。カラーフィールドでは、以下の色名と値を使用できます。

• red、blackなどの色の名前blue
• RGBカラーコード
• 16進数の色の値

手順:

1. 管理画面から[オンラインストア]>[テーマ]に移動します。
2. カスタマイズするテーマの横の[カスタマイズ]をクリックします。
3. 絵筆アイコンをクリックし、[色]をクリックします。
4. [スキーム]セクションで、既存のスキームをクリックするか、[スキームを追加]をクリックして新しいカラースキームを追加します。
5. 変更するコンテンツタイプの色の色見本をクリックします。
6. 色を設定するには16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進コードを削除します。
7. [保存]をクリックします。

グラデーション

一部のテーマでは、色のグラデーションを設定して、視覚的に興味をひく背景オプションを作成できます。color_backgroundの設定は、CSS背景プロパティをカスタマイズするために使用されます。

グラデーションピッカーを使用すると、グラデーションの色、グラデーションスタイル、角度、位置、不透過率を選択できます。グラデーションピッカーで選択したオプションは、テーマエディタでリアルタイムにプレビューされます。検証チェッカー機能を含むCSSコードを使用して、グラデーション背景を作成することもできます。

グラデーションを設定する

1. 管理画面から[オンラインストア]>[テーマ]に移動します。
2. カスタマイズするテーマの横の[カスタマイズ]をクリックします。
3. 絵筆アイコンをクリックし、[色]をクリックします。
4. [スキーム]セクションで、編集する既存のスキームをクリックします。
5. グラデーションの色見本オプション ([背景のグラデーション]など) をクリックします。
6. これまでグラデーションを設定したことがない場合は、いくつかのプリセットオプションが表示され、そこから選択できます。グラデーションのプリセットを選択して、オプションパネルを開きます。
7. 以下のグラデーションオプションを選択します。

• 直線または放射状のグラデーションを、目的に応じてボタンで選択します。
• グラデーションの角度は、上下の矢印で設定します。上や下の矢印をクリックすると、角度のパーセンテージが5ずつ増減します。
• スライダーを使用してグラデーションの位置を選択するか、フィールドに数値を入力します。
• 特定の色の16進コードを入力するか、カラースライダーを使用して色調を選択します。最近選択した色は、グラデーションオプションのパネル下部に表示されます。
• グラデーションを不透明にする場合は、右側のスライダーを使用してグラデーションの透明度を選択します。16進カラーコードの横にあるフィールドに、パーセンテージを入力することもできます。

1. [保存]をクリックします。

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)) を使用することができます。グラデーションを繰り返し使用することも可能です。

手順:

1. 管理画面から[オンラインストア]>[テーマ]に移動します。
2. カスタマイズするテーマの横の[カスタマイズ]をクリックします。
3. 絵筆アイコンをクリックし、[色]をクリックします。
4. [スキーム]セクションで、編集する既存のスキームをクリックします。
5. 編集するグラデーションをクリックします。
6. [グラデーション]の横にある矢印をクリックして[CSS]を選択します。
7. [CSSコード]フィールドに、グラデーションコードを入力または貼り付けます。テーマエディタのプレビューでは、グラデーションが適切な位置に表示されます。
8. [保存]をクリックします。

グラデーションを削除する

1. 管理画面から[オンラインストア]>[テーマ]に移動します。
2. カスタマイズするテーマの横の[カスタマイズ]をクリックします。
3. 絵筆アイコンをクリックし、[色]をクリックします。
4. [スキーム]セクションで、編集する既存のスキームをクリックします。
5. 削除するグラデーションをクリックします。
6. [グラデーションを削除]をクリックします。
7. [保存]をクリックします。