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

EC-CUBE 4でCSSをカスタマイズする方法は3つあり、どこに書くかで反映される範囲が変わります。3つの違いと使い分け、そして「書いたのに反映されない」ときの原因をまとめました。

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

それぞれに長所と短所があります。以下では、管理画面から作った次のページを使って実際に試していきます。

{% extends 'default_frame.twig' %}

{% block main %}

  <h1>カスタムCSSとJavascriptのテストページです</h1>
  <p id="greeting">こんにちは！</p>
  <button id="custom-btn">テキストを変える</button>

{% endblock %}

方法1：CSS管理に書く（全ページに反映）

『管理画面 ＞ コンテンツ管理 ＞ CSS管理』に表示されるコード欄に書く方法です。ここに書いたCSSはすべてのページに反映されます。特別な操作が要らず、もっとも手軽です。

#greeting,
#custom-btn {
    font-size: 20px;
}

#custom-btn {
    margin: 30px 0;
}

文字サイズを20pxにし、ボタンの上下に30pxの余白を付けました。

ここで書いたCSSは html/user_data/assets/css の下に保存されています。

方法2：Twigテンプレートに直接書く（そのページのみ）

CSSを反映させたいページのTwigテンプレートに直接書く方法です。利点は2つあります。

• そのページにだけ反映される
• HTMLとスタイルが同じファイルにあるので、変更と確認が速い

書き方は、{% block main %} より上に次のブロックを追加するだけです。

{% block stylesheet %}
<style>
/* ここにCSSコードを書く */
</style>
{% endblock %}

方法1の内容に加えて、文字色を赤に、ボタンを黒背景・白文字にしてみます。

{% 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 %}

Twigに直接書くことのデメリット

コード量が少ないうちはよいのですが、後々のメンテナンスを考えると手放しではおすすめできません。そこで3つ目の方法です。

方法3：CSSファイルを作って読み込む（本格派向け）

CSSファイルを用意しておき、必要なページのTwigテンプレートから読み込む方法です。TwigとCSSを分けられるので可読性と保守性が上がり、別のページでも同じファイルを読み込むだけで済みます。

1. 1エディターでCSSファイルを作る
2. 2『管理画面 ＞ コンテンツ管理 ＞ ファイル管理 ＞ assets ＞ css』へアップロードする（またはファイルサーバーから html/user_data/assets/css へ）
3. 3Twigテンプレートから読み込む

{% block stylesheet %}
<link rel="stylesheet" href="{{ asset('assets/css/(適用したいCSSファイル名)', 'user_data') }}">
{% endblock %}

方法2の内容に加えて、文字を太字に、ボタンの文字を大きく・角丸にしてみます。以下を test.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;
}

Twigテンプレートは次のようになります。

{% extends 'default_frame.twig' %}

{% block stylesheet %}
    <link rel="stylesheet" href="{{ asset('assets/css/test.css', 'user_data') }}">
{% endblock %}

{% block main %}

  <h1>カスタムCSSとJavascriptのテストページです</h1>
  <p id="greeting">こんにちは！</p>
  <button id="custom-btn">テキストを変える</button>

{% endblock %}

CSSが反映されないときの対処法

書いたのにCSSが効かない。よくある原因を、確認する順に並べました。

1. キャッシュが残っている

見落としがちで、気づかないと何時間も溶かす代表格です。キャッシュ が残っていると、いくらリロードしても表示は変わりません。

削除する場所は2か所あります。両方試してください。

• EC-CUBE側：『管理画面 ＞ コンテンツ管理 ＞ キャッシュ管理』から削除
• ブラウザ側：設定画面から削除、またはスーパーリロード（キャッシュを無視した再読み込み）

CSSに限らず、何かカスタマイズしたらキャッシュを削除する習慣を付けておくと事故が減ります。

2. 詳細度の高い別のCSSが効いている

キャッシュを消しても変わらない場合に多いのがこれです。EC-CUBEは既定でさまざまなCSSを読み込んでいるため、そちらが優先されていることがあります。

表示ページ上で右クリック →「検証」を開き、変更したい要素のスタイルを見てください。自分の書いたCSSに取り消し線が入っていれば、他のCSSに負けています。

3. Bootstrapのバージョンが違う

EC-CUBEは Bootstrap というCSSフレームワークを採用しています。EC-CUBEのバージョンによって、読み込んでいるBootstrapのバージョンが違います。

4. 単純な記述ミス

上の3つで解決しない場合は、たいてい書き間違いです。検証画面に自分のCSSがそもそも表示されていなければ、読み込めていません。

• 違うTwigテンプレートに書いている
• CSSファイルを読み込むパスが間違っている
• セレクタの指定が間違っている
• 記号の書き間違い（. # : ; の付け忘れ・取り違え）

まとめ

• CSSの書き場所は3つ。反映させたい範囲で選ぶ
• 手軽なのは方法1（CSS管理）。ただし全ページに効くので、増えると管理しきれなくなる
• 方法2（Twigに直接）は速いが、再利用と保守に弱い
• 本格的にカスタマイズするなら方法3（CSSファイルを分けて読み込む）
• 反映されないときはキャッシュ → 詳細度 → Bootstrapのバージョン → 記述ミスの順に確認する

EC-CUBEのカスタマイズに関する記事

• カスタマイズのまとめ
• JavaScriptの簡単設定と反映方法
• Twig まとめ(1) ～継承やブロックについて～
• ヘッダーを上部に固定し、スクロールで追従させるカスタマイズ
• デバッグモードの設定/解除方法

この記事に出てきた用語

• EC-CUBEとは？
• CSSとは？
• キャッシュとは？
• フレームワークとは？
• デベロッパーツールとは？
• スコープとは？