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

CSS上書きとLESS

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

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

  1. CS-Cartの導入が完了したらテーマがインストールされ「themes」のディレクトリが作成されています。
    FTPソフトで接続し、以下の「themes」ディレクトリをGET(ダウンロード)します。

    CS-Cartインストールディレクトリ\design\themes\
  2. 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でカスタマイズするには限界があります。
テーマを作成することで、更に細かなデザイン・レイアウトが可能になります。

  1. CS-Cartのデフォルトテーマを複製しカスタマイズ、オリジナルテーマに作り変えていきます。
    CS-Cartインストールディレクトリ\design\themes\responsive

    \design\themes\の中にあるデフォルトテーマresponsiveを同じディレクトリに複製し、任意のテーマ名へ書き換えます。例としてテーマフォルダ名をoriginal_themeとします。

  2. テーマの基本情報がデフォルトテーマのままなので、テーマフォルダ直下にある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管理画面に移動して自作テーマを適用しデザインをカスタマイズします。

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

  1. CSCart管理画面のデザイン > テーマを開く。
    テーマの変更
    デフォルトで設定されているレスポンシブテーマの下に、新しくコピー作成したoriginal_theme(オリジナルテーマ)がありますので、有効化
  2. CSCart管理画面のデザイン > レイアウトを開く。
    レイアウトのエクスポート
    「レイアウトの編集: メイン」ページの右側にある歯車マーク > レイアウトのエクスポートバックアップを取ります。
  3. そのまま「レイアウトの編集: メイン」ページでレイアウト設定を行います。
    レイアウトの切り替え  メイン プロパティ
    の右側にあるレイアウトの切り替え > メイン > プロパティでレイアウトの大枠(最大幅など)を設定します。
    レイアウト プロパティ
    ※グリッド数は16の他に12が選べますが、すべてのページでレイアウトが崩れるため16のまま編集した方が効率がいい。
    サイト最大幅の変更前
    ↓サイト最大幅1200px(デフォルト)から1100pxへ変更してみた。
    サイト最大幅の変更後
  4. 「レイアウトの編集: メイン」でページごとのレイアウトを編集します。
    レイアウトの編集 ページ選択
    初期状態はデフォルトが選択されています。
    「デフォルト」は全てのページから参照される親ページで、トップパネルヘッダーフッターをグローバルに設定します。
    「デフォルト」にあるメインコンテンツのブロック部分が他のページで編集する箇所に当たります。
    デフォルト メインコンテンツ
    トップページ/商品/カテゴリーなどのページを開くと、トップパネル・ヘッダー・フッターはデフォルトの共通設定なので、編集できないようになっています。
    トップページ トップパネル ヘッダー 共通設定
    グリッドやブロックの歯車マークをクリックして編集したり、ドラッグ&ドロップでレイアウトを組み替えます。
    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を参照。