EC-CUBEのカスタマイズ・制作会社 強いネットショップ構築します｜EC-Orange
EC-CUBE カスタマイズ CSSを活用したデザインカスタマイズ
カスタマイズ：基礎/デザインカスタマイズ方法
EC-CUBEは、サイトのデザインをCSSによって行っています。
従って、CSSファイルを編集することで、デザインを大幅にカスタマイズすることが可能です。
ECサイト全般のデザインカスタマイズについては、EC-CUBE No.1パートナー最新情報ブログをご覧ください。トップ、商品一覧、詳細の基本画面と、ヘッダ・フッタ、買い物カゴや新着情報などトップページのブロック、bodyタグ、問い合わせフォームなどのカスタマイズについてまとめています。
システム開発でお悩みの方は、ネットショップ構築パッケージ EC-Orange にお問い合わせください
EC-CUBEにおけるCSS
CSSファイルの構成
CSSファイルは、
import.css
├main.css
├index.css
├products.css
├under.css
├under02.css
├mypage.css
└window.css
という構成になっており、
ページからはimport.cssを呼び出すようになっています。
格納場所
/html/user_data/packages/default/css
に格納されています。
CSSの編集
管理ページの、
デザイン管理＞CSS編集
から編集することもできます。
（EC-CUBEマニュアル CSS編集 も併せてご覧ください。）
ただし、管理ページから編集することができるのは、「import.css」のみです。
大幅にデザインを変更したい場合には、新たにCSSファイルを追加した上で、 そのファイルパスをimport.cssに記述する、とした方が、構成がきれいになります。
テンプレートファイルの編集
CSSの変更に伴い、HTMLデータ（テンプレートファイル）の編集が必要になることも多くあります。
その場合は、
/data/Smarty/templates
以下に格納されているテンプレートファイルを編集してください。
中にはPHPの情報を受け取るための変数がいくつか記載されていますが、 特に気にせず、普通のHTMLとして編集してしまえば問題ありません。
EC-CUBEのデザイン・カスタマイズや、ECサイトの開発・構築でお困りなら、
ネットショップ構築パッケージEC-Orangeにお問い合わせください！
ページトップへ