> For the complete documentation index, see [llms.txt](https://docs.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://docs.cs-cart.jp/theme-development/layout-editor.md).

# レイアウトエディター

レイアウトは、ストアフロントのルック＆フィールをカスタマイズする強力なツールです。

ドラッグアンドドロップだけでブロックの位置を変更することが出来ます。

レイアウトグリッドはCSSフレームワークである「Bootstrap 2.3」に準拠しています。\
Bootstrapについての詳しい情報は[Bootstrap公式サイト](http://getbootstrap.com/2.3.2/)をご確認ください。

CS-Cartの管理パネルの`デザイン > レイアウト`でレイアウトを管理できます。

## レイアウトの設定

レイアウトには以下の設定があります：

* `Grid columns` - グリッドは16列固定となりました（CS-Cart4.2.4）\
  グリッド内にグリッドを配置することが出来ます。
* `Layout width` - `fixed`、`requid`または`full-width`のレイアウトを選択

リキッドレイアウトに最小値と最大値のサイト幅を定義することができます。

全幅のレイアウトのサイトはフル画面の幅に適応します。

`固定`レイアウトを使用すると、ピクセル（px）で列幅を定義することができます。

1カラムの幅とそれらの間の間隔 は`css/tygh/grid.less`ファイルに定義されています。 これらはLESSの変数で定義されています：`@gridColumnWidth` と `@gridGutterWidth` 。 デフォルトでは40pxと20pxに等しいです。

以下の(@gridColumns \_ @gridColumnWidth) + ((@gridGutterWidth `(@gridColumns - 1)` サイトの最大幅を探すのは簡単です。(デフォルトでは1175px)

また、画面の幅に応じてブロックの幅を変更するには、`メディアクエリ`を使用することができます。 `リキッド`レイアウトでは列幅はパーセント(％)で定義されている。

One column widthと溝幅は固定レイアウトのために使われる変数の値に応じて比例的に定義されています。

## Layout includes

### Locations

ロケーションは、特定のページの外観を定義します。場所を追加する場合は、 設定

* `Name` - ロケーション名
* `Dispatch` - 特定のページやロケーションが関連しているページタイプ

ディスパッチパラメーターには以下の形式があります：\[*controller\_name*].\[*mode\_name*]：\[*controller\_name*]はコントローラーの名前、\[*mode\_name*]はコントローラーが作動するモードの名前

この値は\_index.php?dispatch\_に追加されます＝特定のロケーションへのぺーじと位置の一部

例えば、\_index.php?dispatch=checkout.cart\_はカートのコンテンツを示しますが、一方で、\_index.php?dispatch=checkout.checkout\_はチェックアウトページを示します。

ドロップダウンリストから定義済みの値を選択することができます。

ヘッダーやフッターのようなサイトの要素は、通常すべてのページで同様です。

各ページにこのコンテンツを複製するのではなく、デフォルトのロケーションを使用します。

`デフォルト`のロケーションはいくつかのページに添付されていますが、共通のロケーションの外観は定義していません。

デフォルトのロケーションは常に定義されています。ロケーションのデフォルトを作るには、ロケーション設定の`デフォルト`チェックボックスを選択します。

### コンテナ

ロケーションのレイアウトは4つのコンテナで構成されています：`トップパネル`、`ヘッダー`、`コンテンツ`、`フッター`

＜画像＞

`トップパネル`、`ヘッダー`及び`フッター`は`デフォルト`ロケーションでのみ定義されます。

ブートストラップコンテナはいかの構造をもっています；

固定レイアウト：

```html
<div class="container">...</div>
```

Fluid layout:

```html
<div class="container-fluid">...</div>
```

### グリッド

グリッドはコンテナに位置しています。ブートストラップのグリッドは.span と .row. を含んでいます。結果的に、16列のグリッドがCS-Cartで使用されます。

### 画像

以下のパラメーターをグリッドに定義することができます：

* `Width` - コンテナに使用される列の数。子コンテナの場合、この番号はルートコンテナの長さを超えることができない。 この設定はブロックに使用する.span を定義します。(.span1-.span16)
* `Content alignment` - ルートコンテナ内のコンテナの位置：右揃え、左揃え、全幅 左揃えにするために`ty-float-left`を追加し、右揃えにするために`ty-- float-right`を追加します。
* `Offset` - 左側からブロックリストを追加します。`.span`と同じ値を使用します。`.offset` クラスはグリッドに追加されます。
* `User-defined CSS-class` - CSSクラスを追加するために使用する

## Blocks

ブロックは特定のストアフロントの一部を表す独立したボックスです。ブロックはグリッドに追加されます。

スキーマを基にして作成されます。スキーマは全てのブロックにあるファイルで、設定やテンプレートは定義されます。

ブロックスキーマへのパスは：`app/schemas/block_manager/blocks.php`

### ブロックの設定

* `Name` - ブロック名
* `Template` ブロックごとに定義されたテンプレート。ブロックテンプレートは`templates/blocks/`ディレクトリにあります。
* `Wrapper` コンテンツを含んだテンプレート。ラッパーは`/templates/blocks/wrappers/`ディレクトリにあります。
* `User-defined CSS-class` - CSSクラスを追加するために使用する

{% hint style="info" %}
HINT

特定のページにトップパネルやヘッダー､フッター(デフォルトのロケーションのみで使用されるコンテナ)を置く必要がある場合は、Smarty supportでHTMLブロックを使用します。このブロックでは現在のページを定義するために`$runtime.controller` と `$runtime.mode`変数が使用されます。
{% endhint %}

例；

`カテゴリー`ページのフッターにテキストを表示するには：

* ヘッダーのコンテナに`HTML block with Smarty support`ブロックを作成します。
* ブロックに以下のコードを書きます：

```html
{if $runtime.controller == "categories" && $runtime.mode == "view"}
        <p>Categories page</p>
{/if}
```

## レイアウトのエクスポート/インポート

作成したレイアウトを以前レイアウト作成しインポートしたファイルにエクスポートすることができます。

それを行う為には、管理パネルの\_Design > Layouts\_ セクションに移動し、ページの右上隅のギアボタンをクリックします、そして、目的のアクションを選択します。

新しいテーマを作成する場合は、ブロックを調子した後レイアウトをレイアウトディレクトリへエクスポートします。

このレイアウトはテーマをインストールすると自動的に有効になります。

### エクスポート/インポートファイル：

* レイアウトの設定
* コンテナ、グリッド及びブロックの構造と設定
* ブロックのコンテンツ。コンテンツタブに定義さており、ブロックのタイプによ異なります。

例えば、`HTMLブロック` と `Smarty supportでのHTMLブロック`はテキストエリアに含まれるテキストです。

製品タイプのブロックでは製品表示の基準（最新、最近表示した）と設定は定義されています。

全てのブロックがコンテンツを持つわけではありません。

{% hint style="warning" %}
警告

レイアウトはテーマがをインストールする時のみインストールされます。もしテーマをインストールし他のものに切り替える場合、インストールされたテーマの最新のレイアウトは有効です。
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cs-cart.jp/theme-development/layout-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.