> 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/styles-and-visual-editor.md).

# スタイルとビジュアルエディター

テーマの「スタイル」とビジュアルエディターについて

## ビジュアルエディター

CS-Cart`ビジュアルエディタ`はとてもシンプルで使いやすいインターフェースを持っており、ショップフロントの外観を編集するための便利なツールです。

例えば、背景やボタンの色を変えたい場合、CSSを編集する必要はありません。\
ビジュアルエディタを開き、要素を対応するための目的の色を選択するだけです。

使用するテーマによっては、ビジュアルエディタに対応していないものもあります。

もし、あなたがテーマの開発者であるなら、開発したテーマがビジュアルエディタに対応しているとそのテーマはより魅力的になるでしょう！

テーマの利用者にとって手動でCSSを編集するよりは、はるかにスマートだからです。

管理パネルでビジュアルエディタを有効にするには、\_デザイン > テーマ\_セクションに移動し、`ビジュアルエディタ`のボタンをクリックします。

＜画像＞

## Styles（スタイル）

各テーマには、ビジュアルエディタでプリインストールされた`スタイル`セットを選択できます。

テーマには、複数のスタイルを作成することができます。\
例えば､ハロウィン期間中ではストアを暗い色にして「ハロウィン」という名前のスタイルを作成することが簡単にできます。\
ショップに一日だけ特別なスタイルを適用して、次の日にはスタイルを元に戻すことが可能です。

ビジュアルエディタで作成された全てのスタイルは以下のディレクトリに保存されています：\
`design/themes/[your_theme_name]/styles/`

スタイルのディレクトリには`１つのディレクトリ`と`２つのファイル`を含んでいます。

data/ ディレクトリは`.less`、`.css`、`.png`ファイルを含みます。これらのファイルには編集されたデータとユーザースタイルが保存されています。

## manifest.jsonファイルについて

`manifest.json`ファイルはjson形式でスタイルについてのデータが記述されています。

* `default_style` - デフォルトのスタイル。
* `names` - スタイル名。例えば、example\_style 名のスタイルを作成し、「Cool Style」に改名したい場合、以下のkey-value のペアを追加する必要があります。

```json
"names": { 
  "example_style": "Cool Style"
}
```

* `default` - デフォルトのスタイル (ビジュアルエディタから削除することはできません)。

## schema.jsonファイルについて

`schema.json`ファイルはjson形式のビジュアルエディタで編集可能な全てのフィールドを含んでいます。このファイルで独自のフィールドを追加することがで切ます。

`schema.json`は４つのセクションに分割されています。

* `general` - 一般的なセクションの設定を含む
* `fields` - 編集可能のフィールドのリスト
  * `variable_name` - less ファイルで利用可能な変数のリスト。どんな名前にも出来ます。
  * `description` - フィールドのディスクリプション
  * `type` - フィールドタイプ
  * `true` - 有効になったときチェックボックスの値
  * `false` - 無効の時にチェックボックスの値

\`\*

* `colors` - カラーセクションの設定が含まれます。
* `fields` - 編集可能なフィールドのリスト
  * `variable_name` - lessファイルで利用可能な変数のリスト。どんな名前もつけられます。
    * `description` - フィールドの説明文（言語変数名）

\`\*

* `fonts` - フォントセクションの設定が含まれます。
* `families` - デフォルトで使用可能なフォント（システムフォント）のリスト
* `fields` - 編集可能なフィールドのリスト
* `variable_name` - lessファイルで利用可能な変数のリスト。
* `description` - フィールドの説明文（言語変数名）
* `properties` - フォントの設定、例えば、サイズの値
* `size` - フォントサイズの設定
* `match` - 選択した値が保存される変数の名前。この変数名はless ファイルで利用可能です。
* `unit` - フォントサイズの値の単位：px / em / %など
* `values` - 利用可能なサイズの値の配列。\[8,9,10,11]はこれら４つの利用可能サイズから選択することができることを意味しています。
* `style` - フォントスタイルの設定（太字 / イタリック 等）
  * `U`- ビジュアルエディタで表示される設定名(`U` - 下線, `B` - 太字,`I`- イタリック)
  * `match` -選択した値が保存される変数の名前。この変数名はless ファイルで利用可能です。
  * `property` - プロパティ値(`U` - 下線)
  * `default` - デフォルト値

\`\*

* `backgrounds` - 背景セクションの設定が含まれます。
* `fields` - 変更可能なフィールドのリスト
  * `variable_name` - lessファイルで利用可能な変数の名前。
    * `description` - フィールドの説明文（言語変数名）
    * `properties` - 背景プロパティの設定値。
    * `color` - 背景色の設定
    * `match` - 選択した値が保存される変数の名前。
    * `pattern` - 値が文字列の場合、画像を背景として使用することができます。文字列は変数名として使用されます。
    * `position` - 背景ポジション。\_top, right, left, bottom\_が指定可能です。文字列は変数名として使用されます。
    * `repeat` - 背景画像のリピートの方法を定義する。\_repeat, no-repeat, repeat-x, repeat-y\_が指定可能です。文字列は変数名として使用されます。
    * `attachment` - 背景画像がコンテンツと共にスクロールされるかどうか定義する。文字列は変数名として使用されます。
  * `full_width` - 背景画像を全てのコンテンツの幅に合わせるか、コンテナに合わせるかを定義します。
    * `description`- フィールドの説明文（言語変数名）
    * `type` - フィールドタイプ（この場合はチェックボックス）
    * `true` - 有効な時にチェックボックスが取る値　
  * `false`- 無効な時にチェックボックスが取る値
  * `transparent` - 背景を透明にするかどうかを定義します。
    * `match` - 選択された値が保存される変数名
  * `gradient` - 背景をグラデーションにするかどうか定義します。カラーセクションからの値が最初の色として使用されます。
  * `match` - 選択された値が保存される変数の名

## 例

ビジュアルエディタのカラーセクションに`my_custom_field_name`でカスタムフィールドを追加する方法

`schema.json`ファイルで`カラー`セクションを探し、以下のコードを最後に追加します

```json
"my_custom_field_name": {
     "description": "theme_editor.my_custom_field_color"
}
```

* `my_custom_field_name` - lessファイルで利用可能な変数名。`description` - フィールド説明文（言語変数名）

\_less\_ファイルで`@my_custom_field_name` を使用した後、lessファイルの変数から値を使用できるようになります。

lessファイルのコードの例：

```less
.my_class {
  color: @my_custom_field_name;
}
```