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

**URL:** <https://community.shopify.com/t/css/10004>\
**Category:** 技術的なQ＆A\
**Created:** [March 15, 2020, 4:17am UTC](https://community.shopify.com/t/css/10004 "2020-03-15T04:17:48Z")\
**Posts on this page:** 8\
**Page:** 1

## AI-generated summary

ShopifyのDebutテーマで、Assetsに追加した独自CSS（about.css）を読み込めない問題が相談され、あわせてトップページのメニューバー固定方法も質問されていた。最初の切り分けとして、ブラウザのデベロッパーツールでabout.cssが実際に読み込まれているか確認し、未読込ならtheme.liquid側、読込済みならCSS記述やセレクタの優先順位を疑うべきだと整理された。

・読込タグは `{{ 'about.css' | asset_url | stylesheet_tag }}` を使用
・Debutの既存CSS（theme.scss.css / theme.scss.liquid）は `!important` などで上書きされにくい可能性あり
・ヘッダー固定は ` .site-header { position: fixed; } ` が基本案として提示された

その後、`theme.liquid` の`<head>`内でメタタグ直下にCSS読込を置く形に変更したところ、about.cssの読込が解決したと報告された。議論は解決済みで、追加案として theme.scss.liquid 下部のカスタムCSS用import領域を使う方法も紹介されている。

<div class="post-metadata">

**Author:** ![ANB](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ANB](https://community.shopify.com/u/ANB)\
**Post date:** [March 15, 2020, 4:17am UTC](https://community.shopify.com/t/css/10004/1 "2020-03-15T04:17:48Z")

</div>

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

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

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

{{ ‘about.css’ | asset\_url | stylesheet\_tag }}

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

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\
**Post date:** [March 17, 2020, 8:26am UTC](https://community.shopify.com/t/css/10004/2 "2020-03-17T08:26:13Z")

</div>

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

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

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

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

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

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

ちなみにヘッダー固定は

```auto
.site-header {
    position: fixed;
}

```

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

---

<div class="post-metadata">

**Author:** ![ANB](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ANB](https://community.shopify.com/u/ANB)\
**Post date:** [March 17, 2020, 10:39am UTC](https://community.shopify.com/t/css/10004/3 "2020-03-17T10:39:23Z")

</div>

> [@WEBUILD](#):
>
> さん お答えありがとうございます。 実際に店舗のトップページをディベロッパーツールで検索したところabout.css は読み込まれていませんでした。
> 
> theme.liquidの＜head＞のメタのあとのの下に{{ ‘about.css’ | asset\_url | stylesheet\_tag }}を記述しています。記述位置はhead内のメタの直後がよいのでしょうか？
> 
> アドバイスをもとにもう少し検証してみますが、タグのおすすめ記述位置がわかると助かります。
> 
> よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![WEBUILD](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/webuild/32/271922_2.png) [@WEBUILD](https://community.shopify.com/u/WEBUILD)\
**Post date:** [March 18, 2020, 12:17am UTC](https://community.shopify.com/t/css/10004/4 "2020-03-18T00:17:11Z")

</div>

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

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

```

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

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

---

<div class="post-metadata">

**Author:** ![ANB](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ANB](https://community.shopify.com/u/ANB)\
**Post date:** [March 19, 2020, 2:02am UTC](https://community.shopify.com/t/css/10004/5 "2020-03-19T02:02:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ANB](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ANB](https://community.shopify.com/u/ANB)\
**Post date:** [March 23, 2020, 2:42am UTC](https://community.shopify.com/t/css/10004/6 "2020-03-23T02:42:05Z")

</div>

**WEBUILDさん**

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

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

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [March 23, 2020, 8:31am UTC](https://community.shopify.com/t/css/10004/7 "2020-03-23T08:31:33Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![ANB](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@ANB](https://community.shopify.com/u/ANB)\
**Post date:** [March 23, 2020, 8:47am UTC](https://community.shopify.com/t/css/10004/8 "2020-03-23T08:47:13Z")

</div>

junichiokamuraさん

ありがとうございます。

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