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

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読み込み記述の変更を解説した参考記事も案内された。スレッドは質問者が安心できたと返答しており、実質的に解決済み。

お世話様です。

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

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

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

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

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

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

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

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

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

はじめまして。

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

ちなみに、

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

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

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

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

https://webutubutu.com/webdesign/8896

はじめまして。

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

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

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

kakuma-fblさん、福水正太さん、ありがとうございました。