カスタムCSS

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. テーマエディターに関するShopifyドキュメント
3. カスタムCSSブロックに関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

このブロックは、利用可能な設定では対応できないスタイル調整が必要なときに使います。現在のテンプレート領域に対象を絞ったCSSを追加できるため、余白、タイポグラフィ、配置、レイアウトの修正など、小さな上書きに便利です。テーマ内でブロックがどこに配置されるかの全体像については、セクションとブロックに関するShopifyドキュメントを参照してください。

<style>タグを付けずにCSSのみを入力してください。広すぎるセレクターや無効なルールは、意図した以上にページの多くに影響することがあります。

基本設定

コード欄は、CSSを追加する場所です。このブロックは、サイト全体のスタイルを大量にまとめるよりも、明確なセレクターを使った絞り込んだ変更に適しています。エディター自体の概要については、テーマエディターに関するShopifyドキュメントを参照してください。

ルールはできるだけ具体的かつ最小限に保ってください。範囲を狭くした上書きの方が、テストしやすく、保守しやすく、コンテンツの更新や近くのブロックの調整時に壊れにくくなります。

手順に沿ったガイドが必要な場合は、ソース提供のカスタムCSSリファレンスを参照してください。

標準ブロック設定

エディター設定

これらの設定は、ブロックがエディターのサイドバーでどのように表示されるかにのみ影響します。CSSの目的が明確に分かるように、エディタータイトルを付けてください。特に、同じテンプレートに複数のCustom CSSブロックを追加する場合は重要です。

使用上の注意

1. セレクターは狭く保つ。 CSSが意図せず他のコンテンツのスタイルを変更しないよう、できるだけ小さな範囲を対象にしてください。
2. 例外対応に使う。 まずは組み込みのデザインコントロールを使い、それで対応できない調整にこのブロックを使ってください。
3. ブロック名を明確にする。 たとえば、スペーシングの修正やモバイルのタイポグラフィ調整など、変更内容を説明するエディタータイトルを設定してください。
4. 小さな画面を確認する。 モバイルとタブレットのレイアウトでCSSをテストし、余白、折り返し、配置が引き続き適切に機能することを確認してください。
5. ここに多くを保存しすぎない。 このブロックは簡潔な上書きに使い、大きなカスタムスタイルシステムの置き場としては使わないでください。