【簡単】特定のページ(商品,コレクション)にのみCSSを反映させる方法

【簡単】特定のページ(商品,コレクション)にのみCSSを反映させる方法

Shopifyで作った特定のページにのみ、CSSをあてたいんだけど、どうやればいいのかわからない・・・

↑こういったお悩みに答えます。

結論:該当ページのHTMLに直接記述する

まずは、下記のように、<style>と</style>の間にあてたいCSSを記述します。

--------------

<style>
 p {
  color: red;
}
</style>

--------------

そうしたら、このコードを反映させたいページのHTML欄に貼り付けます。
(操作の流れは、下記動画を参照)

https://gyazo.com/8114bec3d702693cf55112fb72232a34

動画はページですが、商品やコレクションページでも同様です。

まとめ

これで、任意のページにCSSを反映させることができました。

※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになりますので、技術者の方はテーマファイルから記述された方が良いです

参考: 画像とテキストを横並び、かつレスポンシブ対応にしたい

この記事をシェア

※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

Related

関連記事