カスタムCSSでのエラーについて

[K_S4]

「リッチテキスト」というブロックに対して、カスタムCSSで以下のように指定のうえ、保存すると「オンラインストアのエディセッションを公開できません」というエラーができ、保存できません。

.rich-text__blocks {
position: relative;
}
h2:before {
position: absolute;
content: "CONCEPT";
display: block;
font-size: 10rem;
opacity: 0.1;
top: -24%;
left: -5%;
}

ちなみ「content: "CONCEPT"」の記述を削除して保存すると保存できません。このcontentというプロパティを追加する瞬間に保存できません。

こちらはエラーでしょうか？

[Qcoltd]

興味があり調査してみました。

おっしゃる通り、

contentが入っているとエラーが出て保存できませんね。

海外のコミュニティでも、同様の事象が報告されていました。

https://community.shopify.com/c/shopify-scripts/custom-css-error-online-store-editor-session-can-t-b...

どうやら、contentが含まれる以外でもいくつか保存できないケースがあるようです。

上記投稿の最後の返信に回避策が紹介されていました。

https://community.shopify.com/c/shopify-scripts/custom-css-error-online-store-editor-session-can-t-b...

リッチテキストのカスタムCSSを使用するのではなく、

カスタムliquidセクションを使って、

その中に、<sytle></sytle>でスタイルを書き、

カスタムliquid自体は余白を0にしてしまう、

という方法です。

カスタムCSSのエラーについては、

何らかのvalidationにおけるバグであるように思いますので、

Shopifyにお問い合わせいただき、

回答がない、もしくは対応できないという回答がある場合は、

カスタムliquidを使用するのが良いかもしれません。

ご参考まで。

(キュー田辺)

[K_S4]

Qcoltd 様

早速ご回答いただきありがとうございます。

カスタムLiquidでCSSを入れ込むのはいいアイディアですね！

ただ特定のブロックだけに（今回の場合、特定のリッチテキストだけに）CSSを追加したいのですが、カスタムLiquidでCSSを記述する場合は、対象のブロック全てに適用されてしまいますよね？

[Qcoltd]

@K_S4 様

そうですね、そのままCSSを記載してしまうと、

合致する全ての要素とCSS Classに適用されてしまいますね。

お使いのテーマにもよりますが、

例えばDawnの場合ですが、

リッチテキストのようなセクションには、

下記のようにセクションごとにユニークなCSS classが付与されます。

section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding

ですので、

そのセクションにだけCSSを利かせたい場合は、

例えば下記のようにします。

.section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding .rich-text__blocks {
position: relative;
}
.section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding h2:before {
position: absolute;
content: "CONCEPT";
display: block;
font-size: 10rem;
opacity: 0.1;
top: -24%;
left: -5%;
}

ブラウザのデベロッパーツールで、検査することで、

対象のDOM(セクション)がどのようなCSS Classを持っているかを調べることができます。

ご参考まで。

(キュー田辺)