キャンセル
次の結果を表示 
次の代わりに検索 
もしかして: 

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

解決済
Highlighted
観光客
7 1 0

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

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

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

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

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

 

よろしくお願いします。

0 件の「いいね!」
Highlighted

成功

Shopify Partner
31 9 20

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

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

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

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

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

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

ちなみにヘッダー固定は

.site-header {
    position: fixed;
}

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

1 件の「いいね!」
Highlighted
観光客
7 1 0

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

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

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

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

 

 

 

 


 

0 件の「いいね!」
Highlighted

成功

Shopify Partner
31 9 20

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

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

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

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

 

1 件の「いいね!」
Highlighted

成功

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

WEBUILDさん

 

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

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

 

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

 

0 件の「いいね!」
Highlighted

成功

Community Manager
Community Manager
196 39 63

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

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

Technical Partner Manager, Japan
1 件の「いいね!」
観光客
7 1 0

 junichiokamuraさん

 

ありがとうございます。

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

 

 

0 件の「いいね!」