【CS-Cartをカスタマイズ】自作テーマ作成とレイアウト・デザイン編集の方法！

2017/08/02 2020/04/25

CS-Cartショップサイトのデザインを変更するためには

CSS上書きとLESS

アドオン > アドオン管理 > 日本語版アドオン

まず、ショップ構築・運用するためには、CS-Cartを日本向けに最適化する「日本語版アドオン」を有効にして下さい。

CS-Cartの導入が完了したらテーマがインストールされ「themes」のディレクトリが作成されています。
FTPソフトで接続し、以下の「themes」ディレクトリをGET（ダウンロード）します。
```
CS-Cartインストールディレクトリ\design\themes\
```
CSSファイルを編集するには、「themes」内の日本語アドオン（localization_jp）のstyles.cssで基本となるCSSを上書きしています。
```
CS-Cartインストールディレクトリ\design\themes\responsive\css\addons\localization_jp\styles.css
```
同じディレクトリ内にCSSプリプロセッサーのlessファイルも用意されているので、lessの編集環境があれば活用したい。
```
CS-Cartインストールディレクトリ\design\themes\responsive\css\addons\localization_jp\styles.less
```

LESSの使い方についてはコチラの記事で解説：ウェブデザイナーのためのCSSプリプロセッサーLESSの使い方｜実例とともに機能をチェック！

キャッシュをクリア

CS-Cartで設定を変更したり、FTPソフトでCSSを上書きしてもキャッシュが残っている場合、変更が反映されません。

一般設定 > ストレージ > キャッシュのクリア

を使うと、手動でキャッシュクリアすることが出来ます。変更ページを開き、もし反映されていなかったらスーパーリロードで再読込を行って下さい。

ただ、変更の度に手動でキャッシュのクリアを行うのは面倒です。

デザイン > テーマ

テーマを開き、ページの右側にある「キャッシュの自動リビルド」を ON に切り替えます。
すると、自動でキャッシュクリアすることが出来ます。もし反映されていなかったら、手動でキャッシュクリア、スーパーリロードの順で行って下さい。

自作テーマの作成

デフォルトテーマをCSSでカスタマイズするには限界があります。
テーマを作成することで、更に細かなデザイン・レイアウトが可能になります。

CS-Cartのデフォルトテーマを複製しカスタマイズ、オリジナルテーマに作り変えていきます。
```
CS-Cartインストールディレクトリ\design\themes\responsive
```
\design\themes\の中にあるデフォルトテーマresponsiveを同じディレクトリに複製し、任意のテーマ名へ書き換えます。例としてテーマフォルダ名をoriginal_themeとします。

テーマの基本情報がデフォルトテーマのままなので、テーマフォルダ直下にあるmanifest.jsonを書き換えます。

CS-Cartインストールディレクトリ\design\themes\original_theme\manifest.json

自作テーマ用に編集します。今回は以下のようにしました。

{
"title": "オリジナルテーマ",
"description": "デフォルトテーマをカスタマイズした自作テーマです。",
"logo": "media/images/cart.png",
"developer": "wpno",
"favicon": "media/images/icons/favicon.ico",
"parent_theme": "responsive"
}

書き換えたら、FTPでアップロードします。

アップロードしたら、CSCart管理画面に移動して自作テーマを適用しデザインをカスタマイズします。

自作テーマのデザイン編集

CSCart管理画面のデザイン > テーマを開く。

デフォルトで設定されているレスポンシブテーマの下に、新しくコピー作成したoriginal_theme（オリジナルテーマ）がありますので、有効化。
CSCart管理画面のデザイン > レイアウトを開く。

「レイアウトの編集: メイン」ページの右側にある歯車マーク > レイアウトのエクスポートでバックアップを取ります。
そのまま「レイアウトの編集: メイン」ページでレイアウト設定を行います。

の右側にあるレイアウトの切り替え > メイン > プロパティでレイアウトの大枠（最大幅など）を設定します。

※グリッド数は16の他に12が選べますが、すべてのページでレイアウトが崩れるため16のまま編集した方が効率がいい。

↓サイト最大幅1200px（デフォルト）から1100pxへ変更してみた。
「レイアウトの編集: メイン」でページごとのレイアウトを編集します。

初期状態はデフォルトが選択されています。
「デフォルト」は全てのページから参照される親ページで、トップパネル・ヘッダー・フッターをグローバルに設定します。
「デフォルト」にあるメインコンテンツのブロック部分が他のページで編集する箇所に当たります。

トップページ/商品/カテゴリーなどのページを開くと、トップパネル・ヘッダー・フッターはデフォルトの共通設定なので、編集できないようになっています。

グリッドやブロックの歯車マークをクリックして編集したり、ドラッグ＆ドロップでレイアウトを組み替えます。
CSSで編集するには、「ユーザー定義CSSクラス」を追加します。複数のCSSを定義するには、半角スペースで区切ります。

Bootstrapフレームワークが使える

あらかじめ定義されたCSSルールを使うことが出来ます。
例えば、Bootstrapグリッドシステム。（※バージョンが2.3.2なので注意！）
全幅コンテナをspanで16グリッドに分割してレイアウトします。

.span4	.span4	.span4	.span4
.span8		.span8

使いやすいCSSルールとして、端末ごとの表示（visible）・非表示（hidden）があります。

.visible-phone	スマホ画面でのみ表示（767px以下）
.visible-tablet	タブレット画面でのみ表示（768px以上~979px以下）
.visible-desktop	パソコン画面でのみ表示（980px以上）
.hidden-phone	スマホ画面でのみ非表示（767px以下）
.hidden-tablet	タブレット画面でのみ非表示（768px以上~979px以下）
.hidden-desktop	パソコン画面でのみ非表示（980px以上）

他の機能を確認するにはBootstrap2.3.2を参照。

- CS-Cart v4, CSS, WEBデザイン, ネットショップ制作 CSSプリプロセッサー, LESS, カスタマイズ, テーマ, 使い方, 編集