EC-cubeのテンプレートをカスタマイズする際、元のファイルを書き換えず、カスタマイズ用のCSSで上書きする方法が望ましいです。では、オリジナルのCSSファイルを設置してみましょう!
INDEX
カスタマイズ用の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を使ってカスタマイズする準備が整いました。
バージョン情報
- EC-cube :3系
コメント ※ハンドルネームでお願いします