この記事では、『EC-CUBEでCSSをカスタマイズする3つの方法』と『CSSが反映されないトラブル対処法』を、実例を交えつつ解説しています。
JavaScriptのカスタマイズについては こちらの記事 にまとめています。
- 管理画面の「CSS管理」から、カスタマイズ用CSS（customize.css）にコードを書く。
→ 全ページ に反映される。 - CSSをカスタマイズしたいページ（Twigテンプレート）にコードを書く。
→ 記述したページ にのみ反映される。 - オリジナルのCSSファイルを作成し、反映させたいページ（Twigテンプレート）でそれを読み込ませる。
→ 特定の複数ページ に反映される。
CSSをカスタマイズする3つの方法
CSSのカスタマイズは、主に冒頭で述べた3つの方法があります。
- 管理画面の「CSS管理」から、カスタマイズ用CSS（customize.css）にコードを書く。
- CSSをカスタマイズしたいページ（Twigテンプレート）にコードを書く。
- オリジナルのCSSファイルを作成し、反映させたいページ（Twigテンプレート）にそれを読み込ませる。
それぞれに長所・短所があり、以下で詳しく説明します。
なお、本記事では管理画面から作成した以下のページを用意して、CSSのカスタマイズを実践していきます。
【CSSカスタマイズ用に準備したページはこちら】
- URL
-
(ドメイン名)/user_data/test
- Twig
-
app/template/user_data/test.twig
{% extends 'default_frame.twig' %}
{% block main %}
<h1>カスタムCSSとJavascriptのテストページです</h1>
<p id="greeting">こんにちは！</p>
<button id="custom-btn">テキストを変える</button>
{% endblock %}
別記事 でJavascriptのカスタマイズも実装予定のため、意味ありげなボタンも設置しています。
（本記事ではボタンを押しても何も起きません。）
CSS管理からカスタマイズ用CSSファイルにコードを書く
1つ目は、『EC-CUBE管理画面 ＞ コンテンツ管理 ＞ CSS管理』で表示されるコードに記載する方法です。
通常のCSS同様にコードを記述することで、書かれたCSSがすべてのページに反映されます。
特別な操作は必要なく、もっとも簡単な方法かと思います。
【カスタマイズ用CSSファイルを用いたカスタマイズ例はこちら】
/* カスタマイズ用CSS */
#greeting,
#custom-btn {
font-size: 20px;
}
#custom-btn {
margin: 30px 0;
}文字サイズを「20px」に大きくし、ボタンの上下に30pxの余白を付けてみます。
CSS変更前と変更後のページを比較してみると、ちゃんとCSSが適用されました。
キャッシュが残っていたり、詳細度の高い他のCSSが優先されていたりすることがあります。
詳しくは 本記事後半 で解説しています。
とても簡単なのですが、この方法でカスタマイズを進めていくと「customize.css」のコードがどんどん長くなっていき、見通しが悪くなってしまいます。
（どのCSSがどのページに反映されているかわかりづらくなります。）
あとでメンテナンスが大変ですし、意図しないページにまでCSSが反映されてしまうと面倒ですよね。
そこで、次にページごとにCSSを反映させる方法を紹介します。
ちなみに、ここで記述したファイルは「html/user_data/assets/css」下に保存されています。
CSSを反映させたいページ（Twigテンプレート）に書く
2つ目は、CSSを反映させたいページ（Twigテンプレート）に記述する方法です。
この方法の良いところは以下の2つ。
- 反映させたいページのみに反映させられる
- デザインの変更と確認が容易になる。
- HTML要素とそのスタイリングが同じファイル内に書かれているので、それぞれのファイルを探さなくてよい。
記述の仕方は、CSSを反映させたいページ（Twigテンプレート）の {% block main %} の上方に以下コードを記述するだけ。
{% block stylesheet %}
<style>
/* ここにCSSコードを書く */
</style>
{% endblock %}直接Twigテンプレートに記述するので、あとで確認や修正が簡単ですね。
コード量が少ないときにはオススメです。
【TwigテンプレートにCSSコードを記述するカスタマイズ例はこちら】
{% extends 'default_frame.twig' %}
{% block stylesheet %}
<style>
#greeting,
#custom-btn {
font-size: 20px;
color: red;
}
#custom-btn {
margin: 30px 0;
background-color: black;
color: white;
}
</style>
{% endblock %}
{% block main %}
<h1>カスタムCSSとJavascriptのテストページです</h1>
<p id="greeting">こんにちは！</p>
<button id="custom-btn">テキストを変える</button>
{% endblock %}1つ目のCSSカスタマイズの内容に加え、「テキストの色を赤」「ボタンのテキストを白」「ボタンの背景色を黒」に変更するコードを追加。
適用前後のページを比較してみると、ちゃんとCSSが適用されました。
キャッシュが残っていたり、詳細度の高い他のCSSが優先されていたりすることがあります。
詳しくは 本記事後半 で解説しています。
なお、{% block 名前 %} 〜 {% endblock %} というTwig特有の記法については以下記事にて。
TwigテンプレートにCSSを直接書くことのデメリット
- 再利用性の低下
-
CSSをテンプレートに直接書くと、そのスタイルはそのテンプレートに固定され、他のテンプレートで再利用することが難しくなります。一貫性のあるデザインを維持したい場合には不適切です。
- 保守性の低下
-
テンプレートごとにスタイルが分散していると、全体的なスタイルの変更や更新が困難になります。
コードの重複や整合性の問題が生じる可能性もあります。
このように、後々のメンテナンスなどを考慮すると、あまり望ましくないカスタマイズ方法とも言えます。
そこで最後に紹介するのは、CSSを複数のファイルに分けて保存し、Twigファイルから特定のCSSファイルを読み込んで適用させる方法です。
ファイル管理にオリジナルのCSSファイルを作成し、それを読み込ませる
3つ目は、CSSファイルを複数用意しておいて、CSSをカスタマイズしたいページ（Twigテンプレート）から適用したいCSSファイルを読み込む方法です。
TwigテンプレートとCSSファイルを分けることができ、コードの可読性や保守性が上がります。
別のページでも同じCSSを反映させたい場合、同じCSSファイルを読み込ませるだけで済むのも利点ですね。
- VS codeなどのエディターを使って、CSSファイルを作成する。
- 作成したCSSファイルを、『EC-CUBE管理画面 ＞ コンテンツ管理 ＞ ファイル管理 ＞ assets ＞ css』下にアップロードする。（または、ファイルサーバーから「html/user_data/assets/css」下にアップ。）
- Twigテンプレートに以下コードを記述し、適用したいCSSファイルを読み込ませる。
{% block stylesheet %}
<link rel="stylesheet" href="/html/user_data/assets/css/(適用したいCSSファイル名)">
{% endblock %}CSSファイルを事前に用意する必要があるので少し煩雑に感じるかもしれませんが、これで通常1個しかないCSSファイル（customize.css）を複数用意することができます。
スタイルがファイルごとに整理されるためメンテナンスもしやすく、がっつりカスタマイズする場合はこの方法が一番オススメです。
【CSSファイルを複数に分けてTwigテンプレートから読み込ませるカスタマイズ例はこちら】
以下のCSSファイル（test.css）を作成し、『EC-CUBE管理画面 ＞ コンテンツ管理 ＞ ファイル管理 ＞ assets ＞ css』下にアップ。
#greeting,
#custom-btn {
font-size: 20px;
color: red;
font-weight: bold;
}
#custom-btn {
margin: 30px 0;
background-color: black;
color: white;
font-size: 20px;
border-radius: 4px;
}2つ目のCSSカスタマイズの内容に加え、「テキストを太字」「ボタンのテキストサイズを大」「ボタンを角丸」に変更するコードを追加。
続いてTwigテンプレートを以下のように修正。
{% extends 'default_frame.twig' %}
{% block stylesheet %}
<link rel="stylesheet" href="/html/user_data/assets/css/test.css">
{% endblock %}
{% block main %}
<h1>カスタムCSSとJavascriptのテストページです</h1>
<p id="greeting">こんにちは！</p>
<button id="custom-btn">テキストを変える</button>
{% endblock %}適用前後のページを比較してみると、ちゃんとCSSが適用されました。
キャッシュが残っていたり、詳細度の高い他のCSSが優先されていたりすることがあります。
詳しくは 本記事後半 で解説しています。
CSSが反映されないときの対処法
コードを記載したのに、なぜかCSSが適用されない！？
ここでは、CSSカスタマイズでよくあるトラブルの原因3つについて解説します。
キャッシュが残っている
意外と見落としがちで、気が付かないと何時間も頭を抱えることになる代表的な要因。
キャッシュが残っていると、いくら画面をリロード（更新）してもページが変わりません。
CSSに限らず、何かカスタマイズを行ったときはキャッシュを削除する習慣を付けておいた方が良いです。
また、ブラウザ側にもキャッシュが残っていて変更が反映されない場合もあります。
管理画面からキャッシュを削除しても反映されない場合、ブラウザのキャッシュも削除してあげると反映される場合がありますので、ぜひ試してみてください。
詳細度の高い別のCSSが反映されている
キャッシュを削除したけど反映されない場合に考えられるのが、「詳細度の高い別のCSSが反映されている」というケース。
EC-CUBEでは、デフォルトで様々なCSSが使われているので、それら既存のCSSが邪魔していることもよくあります。
別のCSSが邪魔しているかどうかは、「表示ページ上で右クリック → 検証」から確認できるので、変更箇所のStylesがどうなっているか見てみてください。
コードの記述ミス
上記2つの方法で解決しない場合は、シンプルにコードの記述ミスが原因と思われます。
そもそもページ検証画面で、カスタマイズしたCSSが表示されていなければコードが読み込めていないことになります。
以下の点を中心に、コードを見直してみてください。
- 違うTwigテンプレートにコードを記述している
- CSSファイルを読み込むためのリンクが間違っている
- セレクターの設定が間違っている
- コードの記載ミス（特に、「.」「#」「:」「;」などの記号忘れや付け間違い）
まとめ
以上、EC-CUBEでCSSをカスタマイズする方法と、そのトラブルについて解説しました。
CSSのカスタマイズ方法は複数あり、それぞれにメリットがあるので、どの方法でもカスタマイズできるようになっておくとベターです。
ぜひ、いろいろ試してみてください！