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

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

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]