2021.05.24
【備忘録】Shopifyでcssファイルを個別に適用する方法
こんにちは
MaromaroのTakaです。
最近shopifyに触れる機会が多くなりました。
templateのカスタマイズをする際、
CSSを個別のtemplateに適用する方法が少し分かり辛かったので記事にさせて頂きました。
※私の環境ではtheme kitでカスタマイズ等しています。
やり方
通常HTMLにCSSファイルを適用させる場合は、
hoge.css
上記のようなファイルを用意し、
以下のようにlink タグで読み込むかと思います。
<link rel="stylesheet" href="hoge.css">shopifyでcssを読む際はまず、
assetsフォルダにcssファイルを入れる必要があります。
templateファイルで読み込む際は
{{ 'hoge.css'| asset_url | stylesheet_tag }}上記のように読み込む必要があります。
その際、一つ注意点があります。
shopifyのcssファイルは通常のように、
.css の拡張子のファイルを入れて読み込むと、
cssファイル内でshopify上にあるファイルにアクセス出来ません。
.css の拡張子のファイルを入れて読み込むと、
cssファイル内でshopify上にあるファイルにアクセス出来ません。
というのは、shopify特有の以下のようなタグが使用できなくなるためです。
background: url({{ 'line01.png' | asset_url }})asset_urlはassetsフォルダを指します、
そのため、cssや画像はassetsフォルダに入れる必要があります。
※余談ですが、assetsフォルダにサブフォルダを使用することは出来ません。
そのため、cssや画像はassetsフォルダに入れる必要があります。
※余談ですが、assetsフォルダにサブフォルダを使用することは出来ません。
.css で終わる拡張子のファイルであってもtemplate上で読み込むことは出来ますが、
やはり上記のことを考えると推奨は出来ません。
やはり上記のことを考えると推奨は出来ません。
そのため、cssファイルを使用する際は
hoge.css.liquid
上記のように最後に「 .liquid 」をつけてあげる必要があります。
そうしてあげることで、shopify特有のタグを使用が可能になります。
.liquidがある場合でも読み込む際は、
{{ 'hoge.css'| asset_url | stylesheet_tag }}上記のように.liquidを取り除き適用させてください。
理由はshopify上で適用される際ファイルがコンパイルされるためです。
理由はshopify上で適用される際ファイルがコンパイルされるためです。
そのため、絶対パスで各ファイルを読むことは出来ません。
以上がcssファイル適用方法となります。
他にもしかしたら便利なやり方があるかもしれませんが、
恐らく一般的な方法とは思います。
恐らく一般的な方法とは思います。
また何か、発見したら記事にしてみようと思います。
Takaでした。
