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

2022年6月29日2022年12月6日

ページを自分好みのデザイン（色や大きさ、配置変更など）にするには？
CSSをページごとに管理するには？
CSSを設定したのに反映されないのはなぜ？

この記事では、EC-CUBEでCSSをカスタマイズする方法とトラブル対処法を、実例を交えつつ解説しています。
EC-CUBE 4のカスタマイズを行いたい方の参考になればと思います！
JavaScriptのカスタマイズについてはこちらの記事にまとめています。

【動作環境】
EC CUBEのバージョン：4.1.2
サーバー：Xserver
ブラウザ：Google Chrome

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

EC-CUBEでCSSをカスタマイズするには、以下の3つの方法があります。

管理画面の「CSS管理」から、カスタマイズ用CSS（customize.css）にコードを書く。
CSSをカスタマイズしたいページ（Twigファイル）にコードを書く。
オリジナルの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 %}

CSSで指定しやすいよう、<p>タグと<button>タグにidを付けています。

別記事で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が適用されました。

とても簡単なのですが、この方法でカスタマイズを進めているとcustomize.cssのコードがどんどん長くなっていき、見通しが悪くなってしまいます。（どのCSSがどのページに反映されているかわかりづらくなります。）

あとでメンテナンスが大変ですし、意図しないページにまでCSSが反映されてしまうと面倒ですよね。
そこで、次にページごとにCSSを反映させる方法を紹介します。

ちなみに、ここで記述したファイルは「html/user_data/assets/css」下に保存されています。

CSSを反映させたいページに書く

2つ目は、CSSを反映させたいページ（Twigファイル）に記述する方法です。
この方法の良いところは以下の2つ。

反映させたいページのみに反映させられる
1つ目の方法よりCSSの内容が確認しやすい

記述の仕方は、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が適用されました。

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

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

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

この方法を使うことでTwigファイルとCSSファイルを分けることができ、よりコードの可読性が上がります。
また別のページでも同じCSSを反映させたい場合、同じCSSファイルを読み込ませるだけで済むのも利点ですね。

オリジナルCSSファイルを保存し、Twigファイルから読み込ませる手順

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カスタマイズでよくあるトラブルの原因3つについて解説します。

キャッシュが残っている

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

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

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

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

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

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

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

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

コードの記述ミス

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

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

まとめ

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！