# オリジナルcssの読みこませ方について

**URL:** <https://community.shopify.com/t/css/32328>\
**Category:** 技術的なQ＆A\
**Created:** [January 19, 2021, 2:24am UTC](https://community.shopify.com/t/css/32328 "2021-01-19T02:24:46Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

DebutテーマでオリジナルCSS（add-style.css）をどう読み込むかが主題。theme.liquid内の既存のtheme.css読み込み行の下に、同じ形式で
`<link rel="stylesheet" href="{{ 'add-style.css' | asset_url }}" ...>`
を追加する方法で問題ないかが確認された。

結論として、その記述で問題ないとの回答でほぼ解決している。実際に反映もされており、追加したのはファイル名だけで、既存の読み込み方法を踏襲している点も確認された。

補足として、`media="print" onload="this.media='all';onLoadStylesheet()"` はCSSの非同期読み込み用の記述と説明された。つまり、初期表示の最適化を意図した書き方であり、極端に言えばこれがなくてもCSS自体は読み込める。

関連情報として、Debutテーマのバージョンアップに伴うCSS読み込み記述の変更を解説した参考記事も案内された。スレッドは質問者が安心できたと返答しており、実質的に解決済み。

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [January 19, 2021, 2:24am UTC](https://community.shopify.com/t/css/32328/1 "2021-01-19T02:24:46Z")

</div>

お世話様です。

オリジナルCSSの読み込ませ方が変更になっているようなので、質問させてください。

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

theme.liquidにあった以下のコードの下に、コードをコピーしてオリジナルCSS（add-style.css）を読み込ませましたが、合っていますでしょうか？

一応、内容は反映されているようです。

どうぞ宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 19, 2021, 4:17am UTC](https://community.shopify.com/t/css/32328/2 "2021-01-19T04:17:35Z")

</div>

URLなどは良いと思いますが、onloadの記載は何か意図があってやってらっしゃいますか？

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [January 19, 2021, 4:48am UTC](https://community.shopify.com/t/css/32328/3 "2021-01-19T04:48:08Z")

</div>

返信ありがとうございます！

1行目のコードが元々入っているものになります。

自分で変更したのは、2行目のファイル名(add-style.css)だけです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [January 19, 2021, 7:44am UTC](https://community.shopify.com/t/css/32328/4 "2021-01-19T07:44:00Z")

</div>

はじめまして。

簡単な返答で恐縮ですが、その記述で問題ございません。

ちなみに、

```markup
media="print" onload="this.media='all';onLoadStylesheet()"

```

この表記は、CSSの非同期読み込みに関してのコードでして、極論、あってもなくてもCSSファイルは読み込めます。

debutテーマのバージョンアップによるCSS読み込み記述の変更に関しては、

この記事が詳しく解説しているので、参考にしてみてください。

[https://webutubutu.com/webdesign/8896](https://webutubutu.com/webdesign/8896)

---

<div class="post-metadata">

**Author:** ![mayu](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@mayu](https://community.shopify.com/u/mayu)\
**Post date:** [January 19, 2021, 10:48am UTC](https://community.shopify.com/t/css/32328/5 "2021-01-19T10:48:15Z")

</div>

はじめまして。

返答ありがとうございます。

この記述で大丈夫とのことで、安心いたしました。

参照記事も教えていただきまして感謝申し上げます。

[kakuma-fbl](https://community.shopify.com/user/746611)さん、[福水正太](https://community.shopify.com/user/717451)さん、ありがとうございました。