> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# カスタムCSS

> CSSを書いてカートドロワーのデザインをカスタマイズします。

<div id="overview">
  # 概要
</div>

このセクションでは、既存のカート要素の見た目や雰囲気を変更したり、エディターで追加したカスタムHTMLにスタイルを適用したりできます。

<div id="where-to-find-it">
  ## **場所**
</div>

次の場所に移動します:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settingsはタブの列になっており、Custom CSSはCustom HTMLと並ぶタブの1つです。表示されていない場合は、**More settings** の中にあります。

<div id="how-it-works">
  ## **仕組み**
</div>

CSSを追加して次のことができます:

* デフォルトのカート要素にスタイルを適用する
* カスタムHTMLの外観を変更する
* 余白、配置、タイポグラフィなどを調整する

入力すると、**オートコンプリートのポップアップ**が有効なUpcartセレクターを提案し、編集をスピードアップします。提案を選択するとルールが自動補完され、コードの構造化に役立ちます。変更が期待どおりに表示されない場合は、ブラウザとUpcartエディターの両方でキャッシュを更新する、CSSの配置場所を確認する、CSSルールの詳細度が適切であることを確認するなど、一般的なトラブルシューティングの提案を確認してください。

<div id="using-selectors">
  ## **セレクターの使用**
</div>

Upcartは幅広いカスタムセレクターを提供しています。\*\*「Show list」\*\*をクリックすると、利用可能なすべてのオプションが表示されます。ストアフロントへの意図しない変更を防ぐため、`.upcart-cart` でスコープしない限り、`body`、`div`、`h3` などのグローバルセレクターの使用は避けてください。スタイルが正しく適用されない状況では、CSSの詳細度を上げるか、CSSルールに `!important` を追加することを検討してください。そうすることで、競合するスタイルを確実に上書きできます。例:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

例（安全なセレクター）:

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **例: お礼メッセージのスタイル設定**
</div>

チェックアウトボタンの下に次のカスタムHTMLを追加したとします:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

CSSがないと、このメッセージは素っ気なく見えます。スタイルを適用するには:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # よくある問題と解決策
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## モバイルデバイスでCSSが表示されない
</div>

カスタムテキストやスタイルがモバイルで表示されない場合:

* キャッシュされたバージョンをクリアするため、**Upcart Editor** とモバイルブラウザの両方でページを更新します。
* 最新の公開済みカートバージョンがアクティブであることを確認します。
* CSSが **Upcart > Cart Editor > Settings** の **Custom CSS** タブに保存されていることを確認します。

<div id="discrepancies-between-editor-and-live-store">
  ## エディターとライブストアの不一致
</div>

エディターでは正しく表示されるのにライブサイトで表示されないスタイルは、セレクターの詳細度を上げるか、主要なルールに `!important` を追加する必要があるかもしれません。

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## CSSセレクターの誤った使用
</div>

正しいクラスまたはIDがターゲットになっていることを確認してください。意図しない結果を避けるため、Upcart固有の要素には常に `.upcart-` などのプレフィックスを含めてください。スタイルが期待どおりに適用されない場合は、セレクター `.thank-you-message` が意図したHTML要素を正確にターゲットにしていることを確認し、CSSコードが正しいタブ（Upcart > Cart Editor > Settings > Custom CSS）に配置されていることを確認してください。

***

カスタマイズのサポートについて:

Upcartサポートは、カスタムCSSの実装やデバッグを支援することはできません。高度なスタイル設定のサポートについては、Shopify Expertとの協力をおすすめします。カスタムCSSのトラブルシューティングについては、モバイルデバイスでスタイルが表示されない、エディターのプレビューとライブのストアフロントの不一致、セレクターの配置ミスなどの問題を解決するためのガイダンスとして、よくある問題のセクションを参照してください。