[EC-CUBE 3] カスタマイズ用のCSSファイルをリンクする

EC-cubeのテンプレートをカスタマイズする際、元のファイルを書き換えず、カスタマイズ用のCSSで上書きする方法が望ましいです。では、オリジナルのCSSファイルを設置してみましょう！

カスタマイズ用のCSSファイルを新規作成する

/html/template/default/CSS/の中に、original.cssなど任意の名前を付けたCSSファイルを置きます。

ファイルをリンクする準備

作ったカスタマイズ用のCSSファイルのリンクはheader内に記載します。headerの情報はdefault_frame.twigに書かれていますので、/src/Eccube/Resource/template/default/ の中にある、default_frame.twig をコピーします。

コピーしたdefault_frame.twigを、カスタマイズ用ファイルを収納する /app/template/default/ に配置します。

このように、カスタマイズする際は、
/src/Eccube/Resource/template/default/の中のファイルをコピーして、
/app/template/default/　に配置した物をカスタマイズします。

カスタマイズ用のCSSをリンクする

/html/template/default/CSS/内にコピーしたdefault_frame.twigを、エディターで開き、以下の記述を探します。

<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">

CSSを上書きしなければならないので、その下にカスタマイズ用のCSSをリンクします。（後から読み込むCSSが優先されるから）

<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/任意のファイル名.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">

これでCSSを使ってカスタマイズする準備が整いました。