この記事の関連ページ
■EC-CUBE3機能カスタマイズ版
インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。
■デモサイト
インストール後、このようなサイトが立ち上がります。
■EC-CUBE3機能カスタマイズ版の機能内容
各機能についてこのページで解説しています。
EC-CUBE3のデフォルトCSS style.css default.css はほとんど修正していません。
「default.css」の最後に、独自のCSSを追加しています。
「default.css」の最後に、独自のCSSを追加しています。
(1)style.cssの変更点
① 全体の幅を変更
/* -------------------------------- Common -------------------------------- */ .inner { max-width: 1150px; } /* ★全体の幅を変更★ */ .inner { max-width: 1000px; }
② 価格表示の変更
.item_price { color: #525263; font-weight: bold; } ↓【変更】 .item_price { color: #525263; font-weight: bold; } .item_price { color: #C00; font-weight: normal; }
③ 追加
/* ▼レイアウト変更(スマホ表示の際、メインカラム(#main)が上に表示されるようにする) */ /* レフトカラムにのみブロックあり */ .theme_side_left #side_left { float: left; width: 25%; padding-right: 16px; } .theme_side_left #main { float:right; width:75%; } /* レフトカラムとライトカラムにブロックあり */ .main-left { float:left; width:75%; } .theme_side_both #side_left { float: left; width: 33.3%; padding-right: 16px; } .theme_side_both #main { float: right; width:66.6%; }
(2)default.cssの最後に独自のCSSを記述
下記の記述以降が独自CSSです。
/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */