EC-CUBE3 初期テンプレートのカスタマイズする際の背景色リセット

前回のEC-CUBE3の記事からちょっと期間があきましたが、今回はデフォルトテンプレートの背景色のリセット方法を解説してみます。

背景色リセットの内容は公式のフォーラムでも質問があるくらい需要あるのかなと思っています。

このリセット方法を知っておくだけでもかなり使えると思います。

なんせ、コピペで済みますからね！

EC-CUBE3のカスタマイズ前提

カスタマイズをするにあたって、基本的に独自のCSSが追加されている必要があります。

これは前回の記事↓でOKだとおもっているので、一度ご一読くださいな。

EC-CUBE3のデザイン変更をする前に知っておくべきCSSの追加方法

2017年2月15日

読んだらちゃんと戻ってきてね？

そもそもデフォルトテンプレートの背景色ってどうなってんの？

さっそくコピペ、と行きたいところですが、その前に「デフォルトテンプレートの背景色がどんな感じに設定されているのか」説明させてください。

早くコピペさせろやぁ！
って方は読み飛ばしてもいいですが、これを知っておくとある程度知識が蓄えられて次回何かしらのカスタマイズをする際のコツというか観点が備わるかも？

デフォルトテンプレートの背景色設定

デフォルトテンプレートのCSSから背景色の指定部分だけを抜き取ると下図のようになります。

レイヤーのように重なって色が設定されています。

ということは、例えば全体の背景色を変えてみようと「body」の背景色を好みの色に設定しても、重ねられた他のブロックの背景色のせいで色の変更が反映されません。

かといって、上記すべての背景色を好みの色に変えるというのもなんか腑に落ちないですよね。

そう、こんな時には設定されている色をなかったことにすればいいのです！

コピペでOK！CSSに記述する背景色リセット方法

では、実際にどのようにすればいいのか説明します。

用意するものは前述した「追加したオリジナルのCSS」です。

そのCSSの先頭部分に下記を追加しましょう。

@charset "utf-8";

/* ----------
　　リセット
 ----------- */
body {
    background-color: transparent;
}
#header {
    background: none;
}
#contents {
    background: none;
}
#footer {
    background: none;
}

以上。終了です。簡単ですね♪

ちなみに、”body”の”background-color : transparent;” の”transparent”は「透明」を表しています。”background-color”に対しては”none”が効かないので透明にして「無かったこと」にしています。

背景色リセット完了！ あとはお好みで♪

背景色リセットのCSSを説明しましたが、僕の場合は背景に画像を設定したいと思って、一旦すべての色を消す必要があったので「リセット→再定義」という手法を取りました。

ぶっちゃけ、”body”の背景色だけどうにかしたい場合は”body”の”background-color”を好きな色に設定して、残りの色を”none”にしてしまえば問題はありません。

この後は好きな色を設定するなり、僕のように背景画像を設定するなり好きにしちゃっていいんです

何はともあれ、これでデフォルトテンプレートの真っ白から解放されたあなたは好きな色を設定して自分独自のデザインをするスタートラインに立てましたね♪

背景色のリセットや設定方法の観点みたいなものも見えてきたと思うので、以降のカスタマイズにも役立ってくれるといいなぁ。