FROM CACHE - jp_header
解決済

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

ANB
観光客
7 1 0

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

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

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

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

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

 

よろしくお願いします。

4 件の受理された解決策

WEBUILD
Shopify Partner
39 11 41

成功

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

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

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

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

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

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

ちなみにヘッダー固定は

.site-header {
    position: fixed;
}

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

元の投稿で解決策を見る

WEBUILD
Shopify Partner
39 11 41

成功

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

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

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

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

 

元の投稿で解決策を見る

ANB
観光客
7 1 0

成功

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

元の投稿で解決策を見る

junichiokamura
Community Manager
1200 280 506

成功

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

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

Senior Partner Solutions Engineer

元の投稿で解決策を見る

7件の返信7

WEBUILD
Shopify Partner
39 11 41

成功

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

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

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

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

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

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

ちなみにヘッダー固定は

.site-header {
    position: fixed;
}

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

ANB
観光客
7 1 0

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

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

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

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

 

 

 

 


 

WEBUILD
Shopify Partner
39 11 41

成功

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

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

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

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

 

ANB
観光客
7 1 0

成功

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

WEBUILDさん

 

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

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

 

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

 

junichiokamura
Community Manager
1200 280 506

成功

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

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

Senior Partner Solutions Engineer
ANB
観光客
7 1 0

 junichiokamuraさん

 

ありがとうございます。

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