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

EC-CUBE

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を使ってカスタマイズする準備が整いました。

バージョン情報

  • EC-cube :3系

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください