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