Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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系
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる