Dawnの配色

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

配色を管理する

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

  1. サイドバーの下部にある [テーマ設定] をクリックします。3. [色] をクリックします。5. テーマの色を変更するには、その色をクリックし、カラーピッカーを使用するか、新しい色の値をテキストフィールドに入力します。6. [保存] をクリックします。

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

色にグラデーションを付ける場合は、カラーボックスをクリックし、フィールドにグラデーションCSSコードを入力または貼り付けます (たとえば、linear-gradient(red, green)radial-gradient(red, green)、または conic-gradient(red, green))。Gradient CSSコードに特殊文字、画像、URLが含まれている場合、テーマエディタにエラーメッセージが表示されます。CSSコードが有効な場合、テーマエディタのプレビューには、選択したグラデーションが適切な位置に表示されます。

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

色の設定

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

設定 説明
テキスト 色はセクションまたはブロックテキストに適用できます。
アクセント1 色を適用して一部のセクションのボタンや背景に反映させることができます。
アクセント1のグラデーション グラデーションを生成するには、グラデーションCSSコードを入力します。
アクセント2 色を適用して一部のセクションのボタンや背景に反映させることができます。
アクセント2のグラデーション グラデーションを生成するには、グラデーションCSSコードを入力します。
背景1 色を適用して一部のセクションのボタンや背景に反映させることができます。
背景1のグラデーション グラデーションを生成するには、グラデーションCSSコードを入力します。
背景2 色を適用して一部のセクションのボタンや背景に反映させることができます。
背景2のグラデーション グラデーションを生成するには、グラデーションCSSコードを入力します。
反転 色を適用して一部のセクションのボタンや背景に反映させることができます。テキストの配色として [背景1] を、背景色としてテキストの配色を使用します。

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

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

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

背景色の設定では、CSSコードが使用されます。CSSコードの有効性チェッカーも含まれており、CSSコードに画像、特殊文字、URLが含まれていると警告が表示されます。CSS背景コードが有効な場合、テーマエディタのプレビューパネルでグラデーションのプレビューが表示されます。

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

無料体験を試す