> ## 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.

# デザイン設定

> Aftersell Cart のグローバルおよびブロックごとのデザイン設定: 色、ボタン、レイアウト、そしてブロックの上書きがどのように重なるか。

Aftersell Cart のデザインは 2 つのレベルで機能します。カート全体にスタイルを当てる**グローバル**設定と、個々のブロックを微調整する**ブロックごと**の上書きです。

<div id="global-design-settings">
  ## グローバルデザイン設定
</div>

エディタのサイドバーから **Cart settings** を開くと、カートのグローバルデザインにアクセスできます。設定は Design、Buttons、Layout にグループ分けされています。

<div id="design">
  ### Design
</div>

| 設定                       | 制御する対象                 | デフォルト     |
| ------------------------ | ---------------------- | --------- |
| **Background color**     | カートの背景。                | `#ffffff` |
| **Text color**           | プライマリテキスト。             | `#000000` |
| **Secondary text color** | 控えめな / セカンダリテキスト。      | `#a8a8a8` |
| **Accent color**         | バッジ、区切り線、取り消し線価格。      | `#f2f2f2` |
| **Border radius**        | コンテナ、カード、画像、テキスト入力の角丸。 | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| 設定                   | 制御する対象                   | デフォルト     |
| -------------------- | ------------------------ | --------- |
| **Background color** | ボタンの塗り。                  | `#000000` |
| **Text color**       | ボタンのラベル。                 | `#ffffff` |
| **Border color**     | ボタンの枠線。                  | `#000000` |
| **Border radius**    | ボタン、ドロップダウン、数量コントロールの角丸。 | `8px`     |

<div id="layout">
  ### Layout
</div>

| 設定                     | 制御する対象                    | デフォルト   |
| ---------------------- | ------------------------- | ------- |
| **Horizontal padding** | カート内部の左右パディング。            | `24px`  |
| **Desktop width**      | デスクトップでのドロワーの幅（最小 320px）。 | `440px` |

<div id="per-block-design-overrides">
  ## ブロックごとのデザイン上書き
</div>

[**Custom code**](/ja/aftersell/cart/custom-code-blocks) を除くすべてのブロックには、設定パネルの下部にブロックごとのデザイン上書きがあります。**Express payments** 以外のすべてのブロックでは **Design** という見出しが付き、Express payments の上書きはラベルのない Style と Spacing のセクションにあります。（Custom code には設定パネル自体がありません。ブロック*そのもの*がコードなので、Code タブだけが表示されます。）これらはスタイル、余白、その他のブロック固有のデザイン設定を制御します。これらの**ブロックごとのデザイン設定**は、空欄の場合、そのプロパティのグローバル設定にフォールバックします。

多くのブロックには、Design パネル内に **Text** セクションもあり、そのブロック内の特定のテキスト要素のタイポグラフィ(フォントファミリー、サイズ、行の高さ、文字間隔)を設定できます。テキスト要素が複数あるブロック(Notes や Empty cart など)には **Text element** ピッカーが表示され、それぞれを個別にスタイリングできます。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="カートエディタのブロックごとの Design 設定パネルのアニメーションプレビュー" title="カートエディタのブロックごとの Design 設定パネルのアニメーションプレビュー" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## フォントとドロワーの位置
</div>

* **フォント:** カートはデフォルトで**テーマのフォント**を継承します。各ブロックのデザイン設定の **Text** セクションから、特定のテキスト要素（商品タイトルやアップセルの見出しなど）にカスタムフォントファミリーを設定できます。詳細は [Cart itemsブロック](/ja/aftersell/cart/cart-items-block) と [Upsellsブロック](/ja/aftersell/cart/upsells-block) を参照してください。
* **ドロワーの位置:** ドロワーの**幅**は調整できます（上記の Desktop width）。左右の位置設定はありません。

<div id="behavior-settings">
  ## 動作設定
</div>

スタイリングに加えて、**Cart settings** には動作オプションもあります。カートへの追加時にドロワーを開く設定や、ストアフロントを同期させるテーマセレクターなどです。[Cart settings](/ja/aftersell/cart/cart-settings) を参照してください。

<div id="when-to-use-custom-css-instead">
  ## カスタム CSS を使うべきとき
</div>

組み込みの設定は一般的なケースをカバーします。それを超えるもの（特定の要素を対象にする、独自の余白、レスポンシブの微調整）には、[Custom CSS](/ja/aftersell/cart/custom-css) を使ってください。