> ## 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を使用して、アップセルカルーセルのナビゲーション矢印の色を調整します。

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

デフォルトでは、Upcartのアップセルセクションのカルーセル矢印は黒色です。アップセルの背景が暗い場合、矢印が見えにくいことがあります。これは、簡単なCSSの更新で矢印の色を変更することで解決できます。

***

<div id="where-to-find-the-custom-css-editor">
  ## カスタムCSSエディターの場所
</div>

1. **Upcart > Cart Editor > Settings > Custom CSS** に移動します
2. 入力フィールドまでスクロールし、CSSコードを貼り付けます
3. **Save** をクリックします
4. ストアフロントを更新して、変更をプレビューします

***

<div id="example-css-to-change-the-arrow-color-in-v10">
  ## V1.0で矢印の色を変更するCSS例
</div>

```
.styles_PreviewCarousel__ [class~="control-next"]::before,  
.styles_PreviewCarousel__ [class~="control-prev"]::before {  
  border-color: white !important;  
}
```

<div id="example-css-to-change-the-arrow-color-in-v20">
  ## V2.0で矢印の色を変更するCSS例
</div>

```
.upcart-public-component-carousel__button svg {  
  stroke: orange;  
}
```

上記のV1のルールは矢印を白に設定し、V2のルールはオレンジに設定します。どちらも「次へ」と「前へ」の両方の矢印に適用されます。

***

<div id="how-to-customize">
  ## カスタマイズ方法
</div>

ブランドのカラーパレットに合わせて `border-color` や `stroke` を更新できます。有効な任意のカラー形式を使用してください:

* 名前付きカラー（例: `black`、`white`、`red`）
* 16進コード（例: `#ffffff`）
* RGB値（例: `rgb(255, 255, 255)`）

**例:**

```
border-color: #00bcd4 !important;
```

これにより、どんな背景色に対してもアップセルのナビゲーション矢印がはっきり見えるようになります。