FROM CACHE - jp_header

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

K_S4
Shopify Partner
6 0 0

「リッチテキスト」というブロックに対して、カスタム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というプロパティを追加する瞬間に保存できません。

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

  • CSS
3件の返信3

Qcoltd
Shopify Partner
1049 429 412

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

 

おっしゃる通り、

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を使用するのが良いかもしれません。

 

ご参考まで。

(キュー田辺)

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
K_S4
Shopify Partner
6 0 0

Qcoltd 様

 

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

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

 

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

Qcoltd
Shopify Partner
1049 429 412

@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を持っているかを調べることができます。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/