FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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 43

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

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

 

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

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

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

Ogasawarakyoheiさま

 

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

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

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