EC-CUBE3で採用されているcssについて

EC-CUBE3からはフロント画面、管理画面ともに標準でレスポンシブ対応となっています。

このレスポンシブ対応を実現するにあたり、EC-CUBE3ではbootstrap3を採用してます。

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

EC-CUBE3で利用されているbootstrap3のcssファイルですが、フロント画面のみカスタマイズが行われており利用するには注意が必要です。

フロント画面で参照されるcssファイル

[ECCUBEROOT]/html/template/default/css

管理画面で参照されるcssファイル

[ECCUBEROOT]/html/template/admin/assets/css

上記のディレクトリにcssファイルが格納されているのですが、フロント画面のbootstrap.custom.min.cssファイルにはbootstrap3のクラス定義は入っておりません。

また、フロント画面のhtmlタグを確認すると、

<link rel="stylesheet" href="/template/default/css/style.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/slick.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/default.css?v=3.0.xx">

というようにbootstrap3という文字が見当たりませんが、実際はstyle.css内で

@import url("bootstrap.custom.min.css"); /* only Grid system CSS */

というようにimportされています。

EC-CUBE3ではbootstrap3のデザインをそのまま適用するのではなく、下記のcssファイルでbootstrap3の定義を上書きしています。

フロント画面

[ECCUBEROOT]/html/template/default/css/default.css

管理画面

[ECCUBEROOT]/html/template/admin/assets/css/dashboard

もしbootstrap3をそのまま適用したいという場合、面倒ですが定義を削除する必要があります。
フロント画面ではbootstrap3を新たにダウンロードして上書きする必要があります。

EC-CUBE3のデザイン変更時の方法・注意点

EC-CUBE3のデザインを変更する場合、

既存のcssファイル(default.css)に対して変更する方法
全く新しくcssファイルを適用する方法

があります。

それぞれ一長一短がありますが、標準デザインから全く別のデザインに変更するなら新たにcssファイルを定義しなおす方が楽です。

また、デザインを変更する点で気をつけなければいけない点ですが、

JavaScriptでidやclass名を指定している画面もあるため、先にJavaScript内で指定している定義を確認
プラグインを利用する場合、プラグインの種類によってidやclass名を指定して画面項目の表示を行っているものがあるため、利用するプラグインによって定義を確認

があります。それぞれよく忘れがちとなるためご注意ください。

今回はCSSファイルの扱い方について記述しましたが、次回は実際に画面を変更する方法を例を出して説明します。