テーマにカスタム CSS を追加する

Cascading Style Sheet (CSS) は、テーマでの要素の表示方法を変更するものであり、一度に複数のページの外観を管理できます。カスタム CSS 機能を使用すると、テーマに組み込まれている設定の範囲を超えて、テーマをカスタマイズできます。たとえば、テーマの色の設定でCSS を使用してグラデーションを設定することができます。カスタム CSS は、テーマ全体、またはテーマ内のテンプレートの特定のセクションに追加できます。カスタム CSS は、**チェックアウト**ページではサポートされていません。

CSS をカスタマイズするには、CSS と HTML にある程度精通している必要があります。テーマをカスタマイズする前に、利用できるサポートのレベルを必ず理解しておいてください。

このページの内容

カスタム CSS を使用する際の考慮事項

テーマにカスタム CSS を追加する前に、以下の考慮事項を確認してください。

以下の CSS セレクタとプロパティは、カスタム CSS ではサポートされていません。
- アットルール @import、@charset、@namespace は使用できません。
- セクションレベルの CSS では、アットルール @media、@container、@layer、@supports のみが許可されています。
- セクションレベルの CSS では、テーマによって shopify-section クラスでレンダリングされる、ラップしている Shopify Section 要素の ID やクラスをターゲットにすることはできません。
- content プロパティはカスタム CSS では利用できません。
親セクション要素をラップしているタグでカスタム CSS ルールを宣言した場合、それは子孫タグとみなされ、スタイリングルールがそのセクションに適用されます。なお、デフォルトでは親セクションは <div> タグでラップされていますが、これはテーマ開発者によってセクションスキーマ内の許可された値のいずれかに設定できます。
現在、カスタム CSS で URL を使用する場合に許可されているのは、https://cdn.shopify.com ドメインのみです。
カスタムフォントに制限はありません。ただし、カスタムフォントは、テキストがレンダリングされる前にブラウザによってダウンロードされる個別のリソースであるため、ストアの全体的なパフォーマンスに影響を与える可能性があります。カスタムフォントによってストアフロントが悪影響を受けないようにするのは、お客様の責任となります。テーマでカスタムフォントを使用する方法を学びましょう。
テーマ全体に影響する CSS ルールは 1500 文字に制限されています。
特定のセクションに影響する CSS ルールは 500 文字に制限されています。
使用する CSS セレクタやクラスによっては、テーマを更新するとカスタム CSS が機能しなくなることがあります。

Shopify では、高度なテーマのカスタマイズはサポートされていません。カスタム CSS のこれらの制限に関連するエラーが発生し、その原因を特定できない場合は、利用可能なその他のサポートリソースのリストを参照してください。

カスタム CSS を追加する

カスタム CSS はテーマ全体に追加でき、**チェックアウト**ページを除くオンラインストアのすべてのページに影響します。たとえば、ストア全体でボタンが表示される方法を変更できます。

手順：

Shopify 管理画面から、[オンラインストア] > [テーマ] に移動します。
「テーマを編集」をクリックします。
「テーマ設定」をクリックします。
「カスタム CSS」をクリックします。
コードを追加します。
「保存」をクリックします。

カスタム CSS は、テーマの特定のセクションに追加することもできます。テーマのセクションにカスタム CSS を追加した場合、その CSS の適用範囲はそのセクションに限定されます。たとえば、単一のセクションにフォントサイズや背景色を適用できます。

手順：

Shopify 管理画面から、[オンラインストア] > [テーマ] に移動します。
「テーマを編集」をクリックします。
CSS を追加するセクションをクリックします。
セクションプロパティパネルの下部にある [カスタム CSS] をクリックします。
コードを追加します。
「保存」をクリックします。

CSS に関するその他のリソース

CSS についてさらに詳しく知りたい場合は、以下のリソースを参考にすることができます。