> 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/about-theme-development.md).

# テーマ開発の概要

## 用語集

* `CSS` - [Cascading Style Sheets](http://ja.wikipedia.org/wiki/Cascading_Style_Sheets)
* `スタイル`（プリセットとも呼ぶ）はカラースキームなど異なるCSSスタイルをひとまとめにしたものです。これらの値はビジュアルエディタで変更できます。
* `ビジュアルエディター` (テーマエディターとも呼ぶ) ・・・特定のデザインの外観を変更するために役立つツールです。
* `テンプレート`・・・Smartyテンプレートエンジンで動作するテンプレートファイル（.tpl）
* `メディア` ・・・画像、アイコン、フォント等
* `レイアウト`・・・ストアフロントのブロックのコンテンツやレイアウトスキーム
* `レイアウト・ロケーション`・・・特定のページの外観を定義
* `コンテナ`・・・グリッドを追加するための`レイアウト`エリア。 次の4つのコンテナタイプがあります：トップパネル、ヘッダー、コンテンツ、フッター
* `グリッド`・・・グリッドの要素

## テーマの構造

テーマにはショップフロントの外観を定義する一連のファイルが含まれています。

テーマはテンプレート、CSSスタイル、メディアコンテンツ、レイアウトスキーム及びショップフロントのブロックコンテンツなどで構成されています。

さらに、テーマには `スタイル`（プリセット）を含むことができます。

＜画像＞

CS-Cartのテーマは、*design/themes/* ディレクトリに保存されています。\
CS-Cartバージョン4.2以降では`レスポンシブ`（Responsive）テーマがデフォルトです。

テーマの構造は6つのディレクトリと2つのファイルで構成されます。

* `Layout` ディレクトリ・・・レイアウトを構築する\_.xml\_ファイル が含まれています。このファイルでさらにレイアウトの詳細を定義することができます。
* `Styles` ディレクトリ・・・\_.less\_ファイル用の変数とビジュアルエディタ要素の構造を含むファイルが含まれています。
* `Templates` ディレクトリ・・・テンプレート (*.tpl* ファイル)が含まれています。
* `CSS` ディレクトリ・・・*.less* や\_.css\_ ファイルが含まれています。
* `Media` ディレクトリ・・・フォント、アイコン、画像が含まれています。
* `customer_screenshot.png` 画像・・・テーマのプレビュー用画像。この画像は管理パネルの\_デザイン > テーマ\_ セクションに表示されます。
* `manifest.json` ファイル・・・テーマの情報を含みます。

## manifest.json

このファイルはメインテーマの情報と以下の要素を含みます：

* `title`・・・管理パネルの\_デザイン > テーマ\_ セクションで表示されるテーマ名
* `description`・・・テーマの概要
* `theme`・・・サイトのロゴへのパス。\_media/images\_ディレクトリにロゴを保存することをおすすめします。
* `developer`・・・テーマの作成者（会社名）。個々の開発者がいる場合は、彼らの名前を書きます。これらの情報は管理パネルの\_デザイン > テーマ\_ セクションに表示されます。
* `favicon`・・・テーマのファビコンへのパス。\_media/images/icons\_ディレクトリにfaviconを保存することをおすすめします。
* `parent_theme`・・・親テーマの名前。レスポンシブテーマをベースに開発したいのであれば、\_responsive\_と書いてください。親テーマは、標準で用意されている2つのテーマを親とする必要があります。\_Basic\_か\_Responsive\_のいずれかを指定する必要があります。

あなたがレスポンシブなテーマを開発している場合は、`parent_theme` を`responsive` に設定します。固定幅のテーマを開発している場合、`parent_theme` を `basic` へ設定します

新しいテーマを作成する際に、全てのテーマファイルを新たに作る必要はありません。テーマのインストール時に必要なファイルはデフォルトのテーマ（*Basic\_か\_Responsive*）からコピーされます。\
`parent_theme` パラメーターは、`manifest.json`ファイルで定義します。

```json
{
    "title": "レスポンシブテーマ",
    "description": "レスポンシブテーマは様々な解像度のディスプレイに対応したテーマです。タブレット端末やスマートフォンでもCS-Cartを快適にご利用いただけます。",
    "logo": "media/images/cart.png",
    "developer": "Simtech",
    "favicon": "media/images/icons/favicon.ico",
    "parent_theme": "responsive"
}
```

{% hint style="info" %}
INFORMATION

`manifest.json`ファイルに「parent\_theme」パラメータが存在しない場合、親テーマは`$config['base_theme']` 設定によって定義されます。
{% endhint %}