配色

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

カラースキームの設定

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

設定 説明
背景 色は、特定セクションの背景、アウトラインボタンの背景に適用されます。
背景のグラデーション 色のグラデーションは、特定セクションの背景に適用されます。可能な場合は、背景の代わりにその背景グラデーションが適用されます。
テキスト 色は、セクションまたはブロックテキストに適用されます。
ソリッドボタンの背景 色は、プライマリーボタンの背景に適用されます。
ソリッドカラーのボタンのラベル 色は、プライマリーボタンのテキストに適用されます。
アウトラインボタン 色は,サブボタンのテキストと枠線に適用されます。
色は、影に適用されます。

配色を管理する

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

  • redblackなどの色の名前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プロパティ値は、背景色を設定する際に使用できます。このフィールドでは、ソリッドカラー (たとえば、#000000blackrgb(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. [保存]をクリックします。

テーマエディタのグラデーションCSSコードフィールド

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

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す