ITOBEN STYLE > EC-CUBE3 > EC-CUBE3機能カスタマイズ版：スタイルシート（CSS）について
2016年7月10日カテゴリー:

EC-CUBE3機能カスタマイズ版：スタイルシート（CSS）について

この記事の関連ページ

■EC-CUBE3機能カスタマイズ版
インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。

■デモサイト
インストール後、このようなサイトが立ち上がります。

■EC-CUBE3機能カスタマイズ版の機能内容
各機能についてこのページで解説しています。

■EC-CUBE3インストールガイド

EC-CUBE3のデフォルトCSS　style.css　default.css　はほとんど修正していません。
「default.css」の最後に、独自のCSSを追加しています。
（1）style.cssの変更点
①　全体の幅を変更

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

②　価格表示の変更

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

③　追加

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

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

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