テーマにカスタムCSSを追加する
カスケーディングスタイルシート (CSS) は、テーマ内の要素の表示方法を変更し、一度に複数のページの外観を管理することができます。カスタムCSS機能を使用して、テーマに組み込みの設定以外でテーマをカスタマイズできます。カスタムCSSは、テーマ全体、またはテーマ内のテンプレートの特定のセクションに追加することができます。カスタムCSSは、[チェックアウト] ページではサポートされていません。
CSSをカスタマイズするには、CSSとHTMLの両方に精通している必要があります。テーマをカスタマイズする前に、利用できるサポートのレベルを必ずご確認ください。
カスタムCSSを使用する際の考慮事項
テーマにカスタムCSSを追加する前に、以下の考慮事項を確認してください。
-
以下のCSSセレクターは、カスタムCSSではサポートされていません。
-
@import、@charset、@namespaceのアットルールは使用できません - セクションレベルのCSSの場合、
@media、@container、@layer、@supportsのアットルールのみが許可されます - セクションレベルのCSSの場合、
shopify-sectionを使用して、テーマによってレンダリングされたShopify セクション要素をグループ化するIDまたはクラスを対象にすることはできません
-
親セクション要素をグループ化しているタグでカスタムCSSルールが宣言されている場合、そのカスタムCSSルールは降順タグとみなされ、スタイルルールはそのセクションに適用されます。デフォルトでは、親セクションは
<div>タグでグループ化されますが、これはテーマ開発者によってセクションスキーマで許可されている値に設定することができます。現在、カスタムCSSでURLを使用する場合、https://cdn.shopify.comドメインのみが許可されています。
カスタムフォントは制限されません。ただし、カスタムフォントとは、テキストがレンダリングされる前にブラウザによってダウンロードされる個別のリソースであり、ストアの全体的なパフォーマンスに影響が及ぶ可能性があります。ストアフロントがカスタムフォントによって悪影響を受けないようにする責任は、あなたにあります。テーマでカスタムフォントを使用する方法についてご確認ください。
テーマ全体に影響するCSSルールは1500文字に制限されています。
特定のセクションに影響を及ぼすCSSルールは500文字に制限されています。
使用するCSSセレクターまたはクラスによっては、テーマを更新するとカスタムCSSが機能しなくなる場合があります。
Shopifyは、高度なテーマのカスタマイズをサポートしていません。カスタムCSSでこれらの制限に関連するエラーが発生し、エラーの原因を特定できない場合は、利用できる他のサポートリソースのリストを参照してください。
カスタムCSSを追加する
カスタムCSSは、[チェックアウト] ページを除くオンラインストアのすべてのページに影響を及ぼすテーマ全体に追加できます。たとえば、ストア全体でのボタンの表示方法を変更することができます。
手順：
- 管理画面で [オンラインストア] > [テーマ] の順に移動します。
- [カスタマイズ] をクリックします。
- [テーマ設定] をクリックします。
- [カスタムCSS] をクリックします。
- コードを追加します。
- [保存] をクリックします。
カスタムCSSは、テーマの特定のセクションに追加することもできます。テーマのセクションにカスタムCSSを追加すると、CSSはそのセクションに限定されます。たとえば、カスタムフォントサイズや背景色を1つのセクションに適用できます。
手順：
- 管理画面で [オンラインストア] > [テーマ] の順に移動します。
- [カスタマイズ] をクリックします。
- CSSを追加するセクションをクリックします。
- セクションプロパティパネルの下部にある [カスタムCSS] をクリックします。
- コードを追加します。
- [保存] をクリックします。
CSSの追加リソース
CSSをカスタマイズするには、CSSとHTMLの両方に精通している必要があります。テーマをカスタマイズする前に、利用できるサポートのレベルを必ずご確認ください。
CSSについての詳細は、以下のリソースをご確認ください。