ドキュメントAPIリファレンスCS-Cart.jp
ドキュメント

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

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

Suggest Edits

ビジュアルエディター

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

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

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

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

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

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

875

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 のペアを追加する必要があります。

"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ファイルでカラーセクションを探し、以下のコードを最後に追加します

------------------------------------------------------------------------
"my_custom_field_name": {
     "description": "theme_editor.my_custom_field_color"
}
------------------------------------------------------------------------
  • my_custom_field_name - lessファイルで利用可能な変数名。description - フィールド説明文（言語変数名）

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

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

.my_class {
color: @my_custom_field_name;
}

Updated over 4 years ago