【EC-CUBE 4】CSSの簡単設定と反映方法

この記事では、『EC-CUBEでCSSをカスタマイズする3つの方法』と『CSSが反映されないトラブル対処法』を、実例を交えつつ解説しています。
JavaScriptのカスタマイズについては こちらの記事 にまとめています。

【動作環境】
EC CUBEのバージョン：4.2.1
サーバー：Xserver

CSSをカスタマイズする3つの方法

CSSのカスタマイズは、主に冒頭で述べた3つの方法があります。

1. 管理画面の「CSS管理」から、カスタマイズ用CSS（customize.css）にコードを書く。
2. CSSをカスタマイズしたいページ（Twigテンプレート）にコードを書く。
3. オリジナルのCSSファイルを作成し、反映させたいページ（Twigテンプレート）にそれを読み込ませる。

それぞれに長所・短所があり、以下で詳しく説明します。

デフォルトで用意されているCSSファイル（html/template/default/assets/css）を修正する方法もあります。
が、後で元に戻せなくなったり意図しないエラーが出たりすることもあるので、基本的にオススメできません。

なお、本記事では管理画面から作成した以下のページを用意して、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が反映されない場合

キャッシュが残っていたり、詳細度の高い他の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が反映されない場合

キャッシュが残っていたり、詳細度の高い他のCSSが優先されていたりすることがあります。
詳しくは 本記事後半 で解説しています。

なお、{% block 名前 %} 〜 {% endblock %} というTwig特有の記法については以下記事にて。

あわせて読みたい

【EC-CUBE 4】Twig まとめ(1)　～継承やブロックについて～ {% extends ‘default_frame.twig’ %} {% block main %}{% endblock %} Twigテンプレート特有の、これらの記法ってどういう意味？ 本記事では、EC-CUBE（Symfony）で用い…

TwigテンプレートにCSSを直接書くことのデメリット

再利用性の低下

CSSをテンプレートに直接書くと、そのスタイルはそのテンプレートに固定され、他のテンプレートで再利用することが難しくなります。一貫性のあるデザインを維持したい場合には不適切です。

保守性の低下

テンプレートごとにスタイルが分散していると、全体的なスタイルの変更や更新が困難になります。
コードの重複や整合性の問題が生じる可能性もあります。

このように、後々のメンテナンスなどを考慮すると、あまり望ましくないカスタマイズ方法とも言えます。
そこで最後に紹介するのは、CSSを複数のファイルに分けて保存し、Twigファイルから特定のCSSファイルを読み込んで適用させる方法です。

ファイル管理にオリジナルのCSSファイルを作成し、それを読み込ませる

3つ目は、CSSファイルを複数用意しておいて、CSSをカスタマイズしたいページ（Twigテンプレート）から適用したいCSSファイルを読み込む方法です。

TwigテンプレートとCSSファイルを分けることができ、コードの可読性や保守性が上がります。
別のページでも同じCSSを反映させたい場合、同じ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が適用されない！？

ここでは、CSSカスタマイズでよくあるトラブルの原因3つについて解説します。

キャッシュが残っている

意外と見落としがちで、気が付かないと何時間も頭を抱えることになる代表的な要因。

キャッシュが残っていると、いくら画面をリロード（更新）してもページが変わりません。
CSSに限らず、何かカスタマイズを行ったときはキャッシュを削除する習慣を付けておいた方が良いです。

キャッシュの削除は『EC-CUBE管理画面 ＞ コンテンツ管理 ＞ キャッシュ管理』から削除できます。

また、ブラウザ側にもキャッシュが残っていて変更が反映されない場合もあります。
管理画面からキャッシュを削除しても反映されない場合、ブラウザのキャッシュも削除してあげると反映される場合がありますので、ぜひ試してみてください。

ブラウザのキャッシュ削除はブラウザの設定画面から行うか、全てのキャッシュを削除して再読み込みを行う『スーパーリロード』を行います。

詳細度の高い別のCSSが反映されている

キャッシュを削除したけど反映されない場合に考えられるのが、「詳細度の高い別のCSSが反映されている」というケース。
EC-CUBEでは、デフォルトで様々なCSSが使われているので、それら既存のCSSが邪魔していることもよくあります。

別のCSSが邪魔しているかどうかは、「表示ページ上で右クリック → 検証」から確認できるので、変更箇所のスタイルがどうなっているか見てみてください。

Bootstrapのバージョンが違う

EC-CUBEでは、Bootstrapというフレームワークを採用しています。EC-CUBEのバージョンにより読み込んでいるBootstrapのバージョンが異なり、使用できるクラスなどが異なります。例えば、新しいバージョンのEC-CUBEで作成されたコードを、古いバージョンのEC-CUBEにコピー＆ペーストした場合、Bootstrapが読み込めずCSSやJavaScriptが反映されないことがあります。

現在使用しているBootstrapのバージョンを確認し、適切なクラスなどを使用するようにしましょう。

コードの記述ミス

上記2つの方法で解決しない場合は、シンプルにコードの記述ミスが原因と思われます。
そもそもページ検証画面で、カスタマイズしたCSSが表示されていなければコードが読み込めていないことになります。
以下の点を中心に、コードを見直してみてください。

• 違うTwigテンプレートにコードを記述している
• CSSファイルを読み込むためのリンクが間違っている
• セレクターの設定が間違っている
• コードの記載ミス（特に、「.」「#」「:」「;」などの記号忘れや付け間違い）

まとめ

以上、EC-CUBEでCSSをカスタマイズする方法と、そのトラブルについて解説しました。

CSSのカスタマイズ方法は複数あり、それぞれにメリットがあるので、どの方法でもカスタマイズできるようになっておくとベターです。
ぜひ、いろいろ試してみてください！