配色

このページはMar 21, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/theme-structure/color-schemeをご覧ください。

「リッチテキスト」、「画像バナー」、「コレクションリスト」など、テーマ内のさまざまなセクションに対しては、テーマ設定で設定した色に基づいてそのセクションに適用する配色を選択できます。テーマにはデフォルトの配色が適用されていますが、テーマエディタでいつでも変更することができます。ブランドカラーを追加すると、オンラインストア全体で、まとまり感のあるカラーパレットを適用することができます。

色の設定

テーマエディタで画像と画像の余白の背景を設定できます。ドロップダウンメニューを使用して、「アクセント1」、「アクセント1のグラデーション」、「アクセント2」、「アクセント2のグラデーション」、「背景1」、「背景1のグラデーション」、「背景2」、「背景2のグラデーション」、または「反転」の中から選択します。選択した配色は、テーマエディタのプレビューパネルで確認できます。

設定 説明
テキスト 色はセクションまたはブロックテキストに適用できます。
アクセント1 色を適用して一部のセクションのボタンや背景に反映させることができます。
アクセント1のグラデーション プリセットのグラデーションを選択するか、グラデーションピッカーを使用してアクセントのグラデーションをカスタマイズします。
アクセント2 色を適用して一部のセクションのボタンや背景に反映させることができます。
アクセント2のグラデーション プリセットのグラデーションを選択するか、グラデーションピッカーを使用してアクセントのグラデーションをカスタマイズします。
背景1 色を適用して一部のセクションのボタンや背景に反映させることができます。
背景1のグラデーション プリセットのグラデーションを選択するか、グラデーションピッカーを使用して背景のグラデーションをカスタマイズします。
背景2 色を適用して一部のセクションのボタンや背景に反映させることができます。
背景2のグラデーション プリセットのグラデーションを選択するか、グラデーションピッカーを使用して背景のグラデーションをカスタマイズします。
反転 色を適用して一部のセクションのボタンや背景に反映させることができます。テキストの配色として [背景1] を、背景色としてテキストの配色を使用します。

配色を選択できる設定の中には、グラデーションを使用できるものもあります。たとえば、Dawnでは、ブランドカラーのグラデーションを設定し、標準アクセントや背景色オプションの代わりに使用することができます。

配色を管理する

ストアの配色はテーマ設定で設定します。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. [カラー] をクリックします。
  3. テーマの色を変更するには、その色をクリックしてカラーピッカーを使用するか、新しい色の値をテキストフィールドに入力します。
  4. [保存] をクリックします。

ソリッドカラーの場合、カラーピッカーを使用して新しい色を選択するか、テキストフィールドに色の値を入力します。このフィールドには、色名 (たとえば、red、black、blue)、RGB、16進数の値を入力できます。

グラデーション

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

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

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. [カラー] をクリックします。

  3. グラデーションオプションのいずれかを選択します。

  4. 以下のグラデーションオプションを選択します。

  • 直線または放射状のグラデーションから選択できます。ボタンを使用して、好みのグラデーションスタイルを選択します。
  • グラデーションの角度は、上下の矢印で設定できます。上または下の記号をクリックすると、角度のパーセンテージが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. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. [カラー] をクリックします。
  3. 編集するグラデーションをクリックします。
  4. [グラデーション] の横にある矢印をクリックし、[CSS] を選択します。
  5. [CSSコード] フィールドに、グラデーションコードを入力または貼り付けます。テーマエディタのプレビューでは、グラデーションが適切な位置に表示されます。
  6. [保存] をクリックします。
    Gradient CSS Code field in the theme editor

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

グラデーションをリセットまたは削除するには、以下を実行します。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. [カラー] をクリックします。
  3. 編集するグラデーションをクリックします。
  4. [グラデーションを削除] をクリックします。
  5. [保存] をクリックします。

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

無料体験を試す