Edited at
EC-CUBEDay 14

【入門向け】cssを編集してEC-CUBEのデザインをカスタマイズしよう

More than 1 year has passed since last update.

こんにちは。

EC-CUBE Advent Calendar 2017 14日目の記事です。

今回は、EC-CUBEの3系のデフォルトデザインの印象を変えてみたいと思います。

cssファイル編集と画像の差し替えだけで簡単にできますので、EC-CUBEのデザインカスタマイズの第一歩の参考にしてもらえればと思います。


カスタマイズ例

BEFORE:

デフォルトキャプチャ

AFTER:

完成キャプチャ

写真利用:https://pixabay.com/photo-2959780/


cssをカスタマイズする


編集するcssファイル

以下のディレクトリにあるcssファイルを編集していきます。

/html/template/default/css/default.css (以下default.css)

/html/template/default/css/style.css (以下style.css)


ヘッダー部分


背景色

スクリーンショット 2017-12-17 18.37.45.png


default.css

#header {

background: #000; /*#fff*/
}


店舗名の文字色

スクリーンショット 2017-12-17 18.45.20.png


default.css

.header_logo_area .header_logo a:link,

.header_logo_area .header_logo a:visited,
.header_logo_area .header_logo a:hover,
.header_logo_area .header_logo a:active {
text-decoration: none;
color: #fff; /*#000*/
}


style.css(暮らしを楽しむ〜)

#header .copy {

font-size: 9px;
font-size: 0.9rem;
margin-top: 0;
margin-bottom: 0;
color: #fff; /*追加*/
}


アイコン周辺

スクリーンショット 2017-12-17 19.03.52.png


style.css(会員登録のアイコン)

.icon-bg {

fill: #000; /*#d4d4d5*/
}


style.css(会員登録のアイコンの文字)

.member_link a {

border-bottom: 1px solid #e8e8e8;
color: #fff; /*#525263*/


style.css(カート部分のカートアイコン)

p.cart-trigger a:link,

p.cart-trigger a:visited,
p.cart-trigger a:hover,
p.cart-trigger a:active {
text-decoration: none;
color: #fff; /*#525263*/
}


style.css(カート部分の合計金額)

#header #cart_area .cart_price {

float: right;
height: 44px;
line-height: 44px;
vertical-align: middle;
margin-right: 16px;
color: #fff; /*追加*/
}


style.css(検索部分の虫眼鏡)

.bt_search .cb-search {

fill: #fff; /*#636378*/
font-size: 25px;
font-size: 2.5rem;
}


カテゴリー

スクリーンショット 2017-12-17 22.26.57.png


style.css(文字色)

.category-nav > li > a {

position: relative;
display: inline-block;
color: #fff; /*#2e3233*/


style.css(区切り線)

#header .category-nav {

border-top: 1px solid #fff; /*#D9D9D9*/
/*border-bottom: 1px solid #D9D9D9;/* /*不要*/
text-align: center;
}


カテゴリー内部

スクリーンショット 2017-12-17 22.46.15.png


style.css(背景)

.category-nav ul {

position: static;
height: auto;
width: auto;
overflow: visible;
z-index: 3;
background: #000; /*#fff*/
}


style.css(文字色)

.category-nav a {

display: block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: #fff; /*#525263*/


フッター

スクリーンショット 2017-12-17 22.33.15.png


style.css(背景色)

#footer {

background: #000 /*#f8f8f8*/
border-top: 1px solid #fff; /*#e8e8e8*/


style.css(当サイトについて〜などの文字)

#footer a {

color: #fff; /*#444*/
}


style.css(コピーライト)

.footer_logo_area {

text-align: center;
color: #fff; /*#000*/
}


購入フロー

スクリーンショット 2017-12-17 22.52.28.png


style.css(ステップの色)

.flowline li.active .flow_number {

background: #DE5D50; /*#5CB1B1*/
}


style.css(文字色)

.flowline li.active {

color: #DE5D50; /*#5CB1B1*/
}


画像の差し替え

/html/template/default/img/top/mv01.jpg

の画像を差し替えます。


完成

スクリーンショット 2017-12-17 18.06.22.png

※表示が変わらない場合は強制リロードやブラウザのキャッシュ削除をしてください

ただひたすらcolorを白黒に設定してモノクロ写真に差し替えただけですが、かなり雰囲気を変えることができました。

今回はTOPページ中心でしたが、編集した部分やその周辺を参考に、ぜひサイト全体のデザインカスタマイズにチャレンジしてもらえたらと思います。


製作中のスタイルガイドについて

ちなみに、現在開発中の次期EC-CUBE 3.n では、よりデザインのカスタマイズがしやすいようにスタイルガイドの整備も進めていますので、こちらもご期待下さい。

参考:

https://qiita.com/chihiro-adachi/items/5cb8ed090d3e2d907b6f