> ## 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="introduction">
  # **はじめに**
</div>

モバイルカートの幅をお好みに合わせてカスタマイズするチュートリアルへようこそ！モバイルカートの幅を調整すると、小さな画面でもカートが見やすく操作しやすくなり、お客様のショッピング体験を大きく向上させることができます。このカスタマイズによりレイアウトをコントロールでき、ストア全体のデザインにシームレスにフィットし、すっきりと整った見た目を保てます。

これらの手順は、基本的な CSS の知識を持つストアオーナーや開発者向けに設計されています。モバイルカートの幅を微調整することで、使いやすさが向上し、お客様のチェックアウトプロセスがよりスムーズになり、コンバージョンと顧客満足度の向上につながる可能性があります。

さっそく始めて、モバイルカートの見た目と動作を思いどおりにしましょう！

<div id="accessing-custom-css-settings">
  ## **カスタム CSS 設定へのアクセス**
</div>

Upcart の CSS のカスタマイズを始めるには、次の手順に従ってください：

1. ダッシュボード内で **Upcart アプリ**を開きます。
2. **Cart Editor** に移動します。
3. **Settings** を開き、**Custom CSS** タブを選択します（タブが収まりきらない場合は **More settings** の中にあります）。

<div id="applying-custom-css">
  ## **カスタム CSS の適用**
</div>

Custom CSS セクションに入ったら、以下の手順に従ってモバイルカートの幅を変更できます。数値を 90% から任意の数値に変更してください。数値が大きいほど、カートが画面を占める割合が大きくなります。（注：これは Upcart の V1.0 と V2.0 の両方に適用されます）

1. CSS の入力エリアを見つけます。
2. 以下のコードをコピーして CSS の入力エリアに貼り付けます：

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **まとめ**
</div>

このチュートリアルに従うことで、モバイルカートの幅のカスタマイズが完了し、より使いやすく、ストアのデザインに合ったものになりました。こうした小さな変更は、お客様のショッピング体験に大きな影響を与え、モバイルデバイスでの閲覧や購入をより簡単にします。

<div id="still-need-help">
  ## まだサポートが必要ですか？
</div>

カスタマイズに関する支援が必要な場合は、カートドロワーへの HTML、CSS、さらには JavaScript の追加について、Shopify Expert への相談をおすすめします。

[Shopify Experts を見る](https://www.shopify.com/partners/directory)