FROM CACHE - jp_header

Dawn 編集画面のカスタムCSSにエラー

Dawn 編集画面のカスタムCSSにエラー

YMD002
遊覧客
17 0 2

Dawnテーマでショップを作成しており、編集画面の「カスタムliquid」にてオリジナルのタイトルを作成したいと思いますが、「カスタムCSS」にコードを追加したら、添付画像のように、エラーが発生し、公開できない状況になっています。何回か試してみましたが、結局CSS中の「content: "";」部分がエラーの原因だったみたいです。

 

解決方法をお伺いしたく、投稿させていただきました。

ご存知の方教えていただけますか?

宜しくお願い致します。

 

画像1.png

 

書いたコード:

 

liquid部分:
<h2>〇〇〇〇〇</h2>

CSS部分:
h2 { display: block; position: relative; } h2::after { content: ""; position: absolute; width: 50px; top: 120%; left: 50%; transform: translateX(-50%); height: 1px; background: #008060; }

 

2件の返信2

ogasawarakyohei
Shopify Partner
114 44 41

私の方でも確認してみましたが、たしかにcontentプロパティがあると保存できませんでした。

カスタムCSSは使用できるCSSに制限があるので、おそらくcontentプロパティは使用できないのだと思います。(使用できないCSSに関する公式の情報を調べましたが見つけられませんでした)

 

contentプロパティが使えない以上、after疑似要素以外で実現するのがよいと思います。

特殊なケースでなければ、疑似要素を使わなくても解決できると思いますので。

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
YMD002
遊覧客
17 0 2

Ogasawarakyoheiさま

 

ご教示いただきありがとうございます。

CSSに制限があることは知りませんでした。他の方法で試してみます。

貴重な時間をいただき本当にありがとうございました。