2.13系カスタマイズ版　簡単にできるデザイン変更 / EC-CUBEカスタマイズ|ダウンロード

カスタマイズ版のデザイン変更について（2.13.2以前）

デザインテンプレートでは、CSSファイルの修正、画像の追加によりデザインの変更が簡単に行えます。
こちらも合わせてご覧ください。

【CSSファイル】

■html/user_data/packages/default（またはテンプレート名）/css/common.css
冒頭に記述されている下記ソースを変更します。

        /* ▼サイト全体の背景を変更する場合は、body→ backgroundを変更。
        　　 ヘッダーの背景を変更する場合は、header_wrap→ backgroundを変更。 */
        body {
            background: #fff;
        }
        #header_wrap {
            background: #fff;
        }
        /* ▲ */

【背景画像】

下記フォルダに画像を置きます。
■html/user_data/packages/default（またはテンプレート名）/img/common

以下のサンプルの画像とソースをまとめてダウンロードできます。

ダウンロード（zip圧縮 13MB）

▼以下サンプル ※画像をクリックすると拡大します。

001_white

body {
    background: url(../img/common/bg_body_white.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_white.png) repeat-x bottom #fff;
}

002_blue

body {
    background: url(../img/common/bg_body_blue.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_blue.png) repeat-x bottom #fff;
}

003_green

body {
    background: url(../img/common/bg_body_green.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_green.png) repeat-x bottom #fff;
}

004_orange

body {
    background: url(../img/common/bg_body_orange.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_orange.png) repeat-x bottom #fff;
}

005_brown

body {
    background: url(../img/common/bg_body_brown.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_brown.png) repeat-x bottom #fff;
}

006_pink

body {
    background: url(../img/common/bg_body_pink.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_pink.png) repeat-x bottom #fff;
}

007_yellow

body {
    background: url(../img/common/bg_body_yellow.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_yellow.png) repeat-x bottom #fff;
}

008_red

body {
    background: url(../img/common/bg_body_red.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_red.png) repeat-x bottom #fff;
}

009_black

body {
    background: url(../img/common/bg_body_black.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_black.png) repeat-x bottom #fff;
	color:#FFF;
}

010_darkblue

body {
    background: url(../img/common/bg_body_darkblue.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_darkblue.png) repeat-x bottom #fff;
	color:#FFF;
}

011

body {
    background: url(../img/common/bg_body_011.png) repeat-x #fff;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_011.png) repeat-x bottom #fff;
}

012

body {
    background: #fff;
}
#header_wrap {
	background: #EEEEF7;
	border-bottom: #D1D1E9 1px solid;
	border-top: #D1D1E9 1px solid;
}

013

body {
    background: #C6DDAE;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_013.png) repeat-x bottom #fff;
	border-top: #666 1px solid;
	border-bottom: #CC9 1px solid;
}

0014

body {
    background: url(../img/common/bg_body_014.png);
}
#header_wrap {
	background: #010726;
	border-top: #000 1px solid;
	border-bottom: #000 1px solid;
	color:#FFF;
}

015

body {
    background: url(../img/common/bg_body_015.png);
}
#header_wrap {
	background: #075807;
	color:#FFF;
}

016

body {
    background: url(../img/common/bg_body_016.png);
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_016.png);
	color:#FFF;
}

017

body {
    background: url(../img/common/bg_body_017.png);
}
#header_wrap {
	background:#C47CD2;
	color:#FFF;
}

018

body {
    background: url(../img/common/bg_body_018.png);
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_018.png) repeat-x bottom;
}

019

body {
    background: url(../img/common/bg_body_019.png);
}
#header_wrap {
	background: url(../img/common/bg_body_019.png);
}

020

body {
    background: url(../img/common/bg_body_020.png) repeat-x;
}
#header_wrap {
	background: url(../img/common/bg_header_wrap_020.png) repeat-x bottom #FFF;
	border-bottom: #E9D1D1 1px solid;
}