オリジナルCSSの読み込ませ方が知りたい

[ANB]

shopifyのDebutのテーマを使用しています。

ページの編集にオリジナルCSSを作成していてそれをリンクさせたいのですが、方法がわかりません。

about.cssをAssetsに作成してtheme.liquidに以下を読み込ませてみたが反映されませんでした。

{{ 'about.css' | asset_url | stylesheet_tag }}

またトップページのメニューバーを固定するCSSを反映する方法も教えていただけないでしょうか？

よろしくお願いします。

[WEBUILD · Accepted solution]

まずは問題の切り分けのため、色々確認していきましょう。

まず、実際に店舗のトップページを表示していただいて、

about.css   が読み込まれているか ソースコード上で確認しましょう。

もしここで読み込まれていなければ、theme.liquidに書いたコードに誤りがあるかもしれません。

さて、実際にabout.css が確かに読み込まれていることを確認できた場合、CSSの記述に誤りがあるか、セレクタの優先順位の関係で

反映されていない、ということになります。
DebutのデフォルトCSSは結構 !important 使われてるのでうまく効いてくれないこともあると思います。
デベロッパーツールで実際に適用されているCSSを確認しましょう。

ちなみにヘッダー固定は

.site-header {
    position: fixed;
}

で行けるはずです。スマホ用のサーチウィンドウとかはheaderに入ってないっぽいので要注意ですが。

[WEBUILD · Accepted solution]

試しに
新しいassetを追加する → 空のファイルを作成する → test.css  を作ってみました。

{{ 'test.css' | asset_url | stylesheet_tag }}

を theme.liquid に追加したら問題なく読込ができました。

おっしゃられている位置では 読込どうこうの前に、theme.scss.css に優先順位で負けてしまって
ほとんどのcssは適用されません。
あと通常は metaタグの下に追加するのが一般的です。
読込が遅くてもいいスタイルは 逆にフッター付近で呼ぶこともあります。

[ANB · Accepted solution]

WEBUILDさん
アドバイスありがとうございます。
週末、確認してみます。
取り急ぎ。

[WEBUILD · Accepted solution]

まずは問題の切り分けのため、色々確認していきましょう。

まず、実際に店舗のトップページを表示していただいて、

about.css   が読み込まれているか ソースコード上で確認しましょう。

もしここで読み込まれていなければ、theme.liquidに書いたコードに誤りがあるかもしれません。

さて、実際にabout.css が確かに読み込まれていることを確認できた場合、CSSの記述に誤りがあるか、セレクタの優先順位の関係で

反映されていない、ということになります。
DebutのデフォルトCSSは結構 !important 使われてるのでうまく効いてくれないこともあると思います。
デベロッパーツールで実際に適用されているCSSを確認しましょう。

ちなみにヘッダー固定は

.site-header {
    position: fixed;
}

で行けるはずです。スマホ用のサーチウィンドウとかはheaderに入ってないっぽいので要注意ですが。

[ANB]

---

@WEBUILD さん　お答えありがとうございます。
実際に店舗のトップページをディベロッパーツールで検索したところabout.css は読み込まれていませんでした。

theme.liquidの＜head＞のメタのあとの<link rel="canonical" href="{{ canonical_url }}">の下に{{ 'about.css' | asset_url | stylesheet_tag }}を記述しています。記述位置はhead内のメタの直後がよいのでしょうか？

アドバイスをもとにもう少し検証してみますが、タグのおすすめ記述位置がわかると助かります。

よろしくお願いいたします。

---

[WEBUILD · Accepted solution]

試しに
新しいassetを追加する → 空のファイルを作成する → test.css  を作ってみました。

{{ 'test.css' | asset_url | stylesheet_tag }}

を theme.liquid に追加したら問題なく読込ができました。

おっしゃられている位置では 読込どうこうの前に、theme.scss.css に優先順位で負けてしまって
ほとんどのcssは適用されません。
あと通常は metaタグの下に追加するのが一般的です。
読込が遅くてもいいスタイルは 逆にフッター付近で呼ぶこともあります。

[ANB · Accepted solution]

WEBUILDさん
アドバイスありがとうございます。
週末、確認してみます。
取り急ぎ。

[ANB]

WEBUILDさん

週末に試したところ解決いたしました。

ありがとうございました。

今回は読みこませる位置をメタタグのすぐ下にしたことで解決しましたが、他の情報も今後に役立させていただきます！

[junichiokamura · Accepted solution]

英語ですが、以下の動画も参考になると思います。
https://www.youtube.com/watch?v=Tt-Wy-ZDwas

theme.scss.liquidの下部にコメントでカスタムcss用のimport を記載するエリアが書かれています。

[ANB]

 junichiokamuraさん

ありがとうございます。

こちらの方法でも試してみます。