---
title: "レイアウト"
---

> Documentation Index
> Fetch the complete documentation index at: https://manual-admin.cs-cart.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# レイアウト

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

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

![](/assets/image-9-2.png)

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

Source: https://manual-admin.cs-cart.jp/mall-admin/website/themes/layout_manager/index.mdx