Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

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

EC-CUBE

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系
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX