ITOBEN STYLE > EC-CUBE3 > EC-CUBE3デザインテンプレート解説：スタイルシートの変更
2016年5月18日カテゴリー:

EC-CUBE3デザインテンプレート解説：スタイルシートの変更

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
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の変更点
①　全体の幅を変更

[php]
/* ——————————–
Common
——————————– */
.inner {
max-width: 1150px;
}
/* ★全体の幅を変更★ */
.inner {
max-width: 1000px;
}
[/php]

②　価格表示の変更

[php]
.item_price {
color: #525263;
font-weight: bold;
}
↓【変更】
.item_price {
color: #525263;
font-weight: bold;
}
.item_price {
color: #C00;
font-weight: normal;
}
[/php]

③　追加

[php]
/* ▼レイアウト変更（スマホ表示の際、メインカラム（#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%;
}
[/php]

（2）default.cssの最後に独自のCSSを記述
下記の記述以降が独自CSSです。

[php]
/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */
[/php]