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

こんにちは。
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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.