本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50
デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/
デザインテンプレートのインストール
1 プログラムファイルの入れ替え
2 テンプレートのアップロード
3 テンプレート適用後
4 プラグインのインストール
5 TOPページの画像スライド(画像カルーセル)
6 Body背景やヘッダー背景を簡単に変更
カスタマイズ内容
1 スタイルシートの変更
2 EC-CUBE3のデフォルト:サイドカラムにブロックを配置したときのレイアウト
3 本デザインテンプレートを適用:サイドカラムにブロックを配置したときのレイアウト
4 ブロックについて
(1)グローバルメニューのカテゴリ表示
(2)グローバルメニュー:プルダウンの作り方
(3)ヘッダー上部のメニュー:cart.twig(カゴの中)に記述
(4)商品検索
(5)ロゴ
(6)カテゴリ
(7)新着情報
(8)フリーエリア
(9)ギャラリー
(10)ショッピングガイド
(11)おすすめ商品
(12)売上ランキング
(13)最近チェックした商品
(14)定休日管理プラグイン
5 商品詳細ページ
(1)商品画像
(2)関連商品
EC-CUBE3のデフォルトCSS style.css default.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です。
/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */