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

こんにちは。
EC-CUBE Advent Calendar 2017 14日目の記事です。

今回は、EC-CUBEの3系のデフォルトデザインの印象を変えてみたいと思います。
cssファイル編集と画像の差し替えだけで簡単にできますので、EC-CUBEのデザインカスタマイズの第一歩の参考にしてもらえればと思います。

## カスタマイズ例

BEFORE:
![デフォルトキャプチャ](https://qiita-image-store.s3.amazonaws.com/0/113212/f3ad5abc-2adc-5c05-c243-96f7ff80271c.png)

AFTER:
![完成キャプチャ](https://qiita-image-store.s3.amazonaws.com/0/113212/b32d13d3-37bc-02ba-c9fd-b53b8d975cf3.png)
写真利用：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](https://qiita-image-store.s3.amazonaws.com/0/113212/b54f83f9-e133-fac7-d7bb-cc3a5fb667b6.png)

```css:default.css
#header {
	background: #000; /*#fff*/
}
```

### 店舗名の文字色
![スクリーンショット 2017-12-17 18.45.20.png](https://qiita-image-store.s3.amazonaws.com/0/113212/11cc335e-7b71-357a-1e07-9400647bd1cf.png)

```css: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*/
}
```
```css: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](https://qiita-image-store.s3.amazonaws.com/0/113212/42854f0e-b7b3-392f-d315-5aca38343a1e.png)

```css:style.css(会員登録のアイコン)
.icon-bg {
    fill: #000; /*#d4d4d5*/
}
```
```css:style.css(会員登録のアイコンの文字)
.member_link a {
     border-bottom: 1px solid #e8e8e8;
     color: #fff; /*#525263*/
```
```css: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*/
}
```
```css:style.css(カート部分の合計金額)
#header #cart_area .cart_price {
    float: right;
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
    margin-right: 16px;
    color: #fff; /*追加*/
}
```
```css:style.css(検索部分の虫眼鏡)
.bt_search .cb-search {
    fill: #fff; /*#636378*/
    font-size: 25px;
    font-size: 2.5rem;
}
```

### カテゴリー
![スクリーンショット 2017-12-17 22.26.57.png](https://qiita-image-store.s3.amazonaws.com/0/113212/d2f0e571-c919-638e-5384-6676e6305887.png)

```css:style.css(文字色)
.category-nav > li > a {
    position: relative;
    display: inline-block;
    color: #fff; /*#2e3233*/
```
```css: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](https://qiita-image-store.s3.amazonaws.com/0/113212/2d02c6ae-6a6a-bb64-d8d2-7bdeb56be9de.png)

```css:style.css(背景)
.category-nav ul {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
    z-index: 3;
    background: #000; /*#fff*/
}
```
```css: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](https://qiita-image-store.s3.amazonaws.com/0/113212/19c99ae1-ba0e-0931-f214-6730ff16b8f7.png)

```css:style.css(背景色)
#footer {
    background: #000 /*#f8f8f8*/
    border-top: 1px solid #fff; /*#e8e8e8*/
```
```css:style.css(当サイトについて〜などの文字)
#footer a {
    color: #fff; /*#444*/
}
```
```css:style.css(コピーライト)
.footer_logo_area {
    text-align: center;
    color: #fff; /*#000*/
}
```

### 購入フロー
![スクリーンショット 2017-12-17 22.52.28.png](https://qiita-image-store.s3.amazonaws.com/0/113212/455eea6c-bf70-21f7-4c9b-4e49321b58b0.png)

```css:style.css(ステップの色)
.flowline li.active .flow_number {
    background: #DE5D50; /*#5CB1B1*/
}
```
```css:style.css(文字色)
.flowline li.active {
    color: #DE5D50; /*#5CB1B1*/
}
```

## 画像の差し替え

/html/template/default/img/top/mv01.jpg
の画像を差し替えます。

## 完成

![スクリーンショット 2017-12-17 18.06.22.png](https://qiita-image-store.s3.amazonaws.com/0/113212/2be4f3ea-afc3-32e7-9eee-140226c5edfb.png)
※表示が変わらない場合は強制リロードやブラウザのキャッシュ削除をしてください

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

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

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

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