> For the complete documentation index, see [llms.txt](https://manual-admin.cs-cart.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual-admin.cs-cart.jp/mall-admin/website/themes/layout_manager.md).

# レイアウト

ECモールの各ページのレイアウトを管理します。

{% hint style="info" %}
CS-Cartでは、「**レイアウト**」、「**グリッド**」、「**ブロック**」というパーツを使用して、レゴブロックを組み上げるように各ページをデザインできます。

* **レイアウト** : 各ページのデザインを行う土台となるパーツです。レイアウト上にグリッドやブロックを配置します。
* **グリッド** : ブロックを配置するための枠組みのようなパーツです。ページの横幅を16に分割し、1～16の間で表示幅を指定できます。
* **ブロック** : ロゴや検索バー、商品画像など、具体的な表示内容が定義されたパーツです。グリッド内に配置して使用します。
  {% endhint %}

<figure><img src="/files/IF1mNfnKZjx5h8QsJJZi" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="284">項目</th><th>説明</th></tr></thead><tbody><tr><td>「← 」ボタン</td><td>前のページに戻る</td></tr><tr><td>歯車アイコン</td><td>以下のアクションを実行<br>・プロパティ<br>・レイアウトのエクスポート<br>・レイアウトのインポート</td></tr><tr><td>「レイアウトの追加」ボタン</td><td>新しいレイアウトを追加</td></tr><tr><td>ページタイプタブ</td><td>デフォルト、トップページ、商品、カテゴリー内商品一覧などのページタイプを選択</td></tr><tr><td>「レイアウトの編集」ボタン</td><td>現在のレイアウトを編集</td></tr><tr><td>「スマホ」ボタン</td><td>スマートフォンで表示されるグリッドやブロックを表示</td></tr><tr><td>「タブレット」ボタン</td><td>タブレットで表示されるグリッドやブロックを表示</td></tr><tr><td>「PC」ボタン</td><td>PCで表示されるグリッドやブロックを表示</td></tr><tr><td>レイアウト編集エリア</td><td>ページ内の各ブロック（ロゴ、検索、カテゴリーなど）をグリッド内に配置</td></tr><tr><td>ページ切り替え用メニュー</td><td>レイアウト編集ページとブロック管理ページの切り替え用メニュー</td></tr><tr><td>レイアウト</td><td>現在表示しているタブの内容と、レイアウトの編集ウィンドウを表示するリンクを表示</td></tr></tbody></table>