WPの

~ワードプレス関連~

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

      2017/08/16

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

CSS上書きとLESS

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

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

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

  2. CSSファイルを編集するには、「themes」内の日本語アドオン(localization_jp)のstyles.cssで基本となるCSSを上書きしています。

    同じディレクトリ内にCSSプリプロセッサーのlessファイルも用意されているので、lessの編集環境があれば活用したい。

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

キャッシュをクリア

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

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

キャッシュを手動でクリア

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

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

デザイン >

キャッシュを自動でクリア

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

自作テーマの作成

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

  1. CS-Cartのデフォルトテーマを複製しカスタマイズ、オリジナルテーマに作り変えていきます。
    \design\themes\の中にあるデフォルトテーマresponsiveを同じディレクトリに複製し、任意のテーマ名へ書き換えます。例としてテーマフォルダ名をoriginal_themeとします。
  2. テーマの基本情報がデフォルトテーマのままなので、テーマフォルダ直下にあるmanifest.jsonを書き換えます。

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

    書き換えたら、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を参照。

 - CS-Cart v4, CSS, WEBデザイン, ネットショップ制作 , , , , ,