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

**URL:** <https://community.shopify.com/t/css/212710>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [May 1, 2023, 4:39pm UTC](https://community.shopify.com/t/css/212710 "2023-05-01T16:39:09Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

ユーザーがリッチテキストブロックにカスタムCSSで `content` プロパティを含むスタイルを追加しようとすると、「オンラインストアのエディタセッションを公開できません」というエラーが発生し保存できない問題が報告されました。

**原因:**
- Shopifyのバリデーションによるバグの可能性
- `content` プロパティを含むCSSが保存をブロックする
- 海外コミュニティでも同様の事象が確認されている

**回避策:**
カスタムCSSではなく、**カスタムLiquidブロック**を使用する方法が提案されました:
1. カスタムLiquidの余白を0に設定
2. `<style></style>` タグ内にCSSを記述
3. Liquidセクションを使用してスタイルを適用

**追加の注意点:**
- カスタムLiquidでCSSを記述すると、対象ブロック全体に適用される
- 特定のセクションのみに適用したい場合は、ブラウザの開発者ツールで対象のユニークなCSS classを調査し、そのクラスを指定する必要がある（例: `.section-template--[ユニークID]`）

<div class="post-metadata">

**Author:** ![K\_S4](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@K\_S4](https://community.shopify.com/u/K_S4)\
**Post date:** [May 1, 2023, 4:39pm UTC](https://community.shopify.com/t/css/212710/1 "2023-05-01T16:39:09Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 2, 2023, 3:52am UTC](https://community.shopify.com/t/css/212710/2 "2023-05-02T03:52:53Z")

</div>

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

おっしゃる通り、

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

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

[https://community.shopify.com/post/2027172](https://community.shopify.com/post/2027172)

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

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

[https://community.shopify.com/post/2027172](https://community.shopify.com/post/2027172)

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

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

その中に、でスタイルを書き、

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

という方法です。

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

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

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

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

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

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![K\_S4](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@K\_S4](https://community.shopify.com/u/K_S4)\
**Post date:** [May 2, 2023, 4:45am UTC](https://community.shopify.com/t/css/212710/3 "2023-05-02T04:45:24Z")

</div>

[Qcoltd](https://community.shopify.com/user/1166105) 様

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 2, 2023, 6:04am UTC](https://community.shopify.com/t/css/212710/4 "2023-05-02T06:04:01Z")

</div>

@K_S4 様

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

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

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

例えばDawnの場合ですが、

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

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

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

```

ですので、

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

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

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

ご参考まで。

(キュー田辺)