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

# 無効な HTML によって壊れた Cart Editor のレイアウトを修正する方法

> カスタムコードを追加した後にアプリの UI が壊れて表示される場合の修正方法。

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

無効または壊れた HTML が Cart Editor の Custom HTML フィールドに追加されると、レイアウトが崩れてエディターのインターフェースが使用できなくなることがあります。このガイドでは、レイアウトを一時的に修正して、壊れたコードを安全に削除し、完全な機能を復元する方法を順を追って説明します。

<div id="what-causes-the-issue">
  ## 問題の原因
</div>

この問題は通常、マーチャントが次のような操作をした場合に発生します:

* `<style>` タグや `<script>` タグを適切な構造なしで挿入する
* HTML タグを閉じ忘れる、または対応が取れていない
* レイアウトを崩すコンテンツを Custom HTML フィールドに追加する

その結果、Cart Editor が読み取り不能または使用不能になり、編集やページのスクロールすらできなくなることがあります。

<div id="temporary-fix-using-developer-tools">
  ## デベロッパーツールを使用した一時的な修正
</div>

ブラウザーのデベロッパーツールを使用してレイアウトを一時的に修正し、Custom HTML フィールドにアクセスできるようにするには、次の手順に従ってください。

<div id="step-1-open-devtools">
  ## ステップ 1: DevTools を開く
</div>

1. Upcart アプリで Cart Editor を開きます
2. ページ上の任意の場所を右クリックして**検証**を選択するか、次のキーを押します:

   * `Cmd + Option + I`(Mac)
   * `Ctrl + Shift + I`(Windows)

<div id="step-2-find-the-broken-layout-container">
  ## ステップ 2: 壊れたレイアウトコンテナを見つける
</div>

1. DevTools の **Elements** タブで、セレクターツール(DevTools の左上隅)をクリックします
2. Cart Editor のレイアウトにカーソルを合わせ、設定パネルの左側にある緑色でハイライトされたセクションを見つけます。次のようなラベルが付いているはずです:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. 階層を 6 レベル上にたどり、次の要素に到達します:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## ステップ 3: 固定ポジションを無効にする
</div>

1. `.Polaris-Frame__Content` を選択した状態で、**Styles** タブを確認します
2. `position: fixed` プロパティを見つけて、チェックを外します

これでページのロックが解除され、レイアウトを再びスクロールできるようになるはずです。

<div id="remove-the-invalid-html">
  ## 無効な HTML を削除する
</div>

レイアウトに再びアクセスできるようになったら:

1. **Custom HTML** フィールドまでスクロールします
2. 問題の原因となった可能性のある壊れた HTML や埋め込み CSS を探します

レイアウトを崩す典型的な例:

```
<style>  
  body {  
    background: red;  
  }  
</style>
```

1. 内容をバックアップとして別の場所にコピーしてから、削除します
2. 変更を保存します

<div id="confirm-its-fixed">
  ## 修正されたことを確認する
</div>

保存後、Cart Editor は再び正常に読み込まれるはずです。問題が解決しない場合は、無効なタグが残っていないか再度確認するか、マーチャントに連絡して何が追加されたかを確認してください。

<div id="best-practices-to-prevent-this-issue">
  ## この問題を防ぐためのベストプラクティス
</div>

* 完全で有効な HTML のみを挿入する
* HTML の挿入場所にインラインの `<style>` ブロックを直接追加しない
* HTML フィールドに CSS を追加する代わりに、**Custom CSS** セクションを使用する
* 不明な点がある場合は、必ず Sandbox モードで変更をプレビューする