現在EC-CUBE３を使った開発をゴリゴリやっております。
まだコアな部分には突っ込めてませんが、表面から地味にカスタマイズをしております。
今回はちょっとつまづきそうなEC-CUBE3におけるCSSの話をします。
- これからEC-CUBE3に手を出す予定
- EC-CUBE3のデフォルトテンプレートを生かして改造したい
- EC-CUBE3の自作CSS追加方法が分からない
↑↑こんな方には必見だと思います。
前提
まず、前提として今回お話するEC-CUBE3のバージョンについて。
EC-CUBE3 Version 3.0.13 について解説しています。
(執筆時点で最新のバージョンです。)
お使いのバージョンによっては説明通りにいかない場合があるのでお気を付けください。
自作CSSの追加方法
見た目の変更の第一歩としてCSSのカスタマイズがありますよね。
EC-CUBE3のディレクトリ構成に戸惑っているうちは見つけるのも難しいのでここで説明している通りにするだけで設置は可能なはずです。
①自作CSSファイルの保存
まずはCSSファイルの保存場所です。
[EC-CUBE3インストールDIR]\html\template\[テンプレート名]\css
デフォルトのテンプレートを利用している場合は、
[EC-CUBE3インストールDIR]\html\template\default\cssとなるはずです。
ここに空のCSSファイルを作成しましょう。
ファイル名は「半角英数字と-(ハイフン)_(アンダーバー)」は使えるようです。
②自作CSSをテンプレートに定義
先ほどのオリジナルのCSSを利用しているテンプレートに反映しましょう。
EC-CUBE3は「Twig」というテンプレートシステムを採用しています。
探すファイル名は default_frame.twig です。
どこにあるかというと・・・
[EC-CUBE3インストールDIR]\app\template\[テンプレート名]
直下に存在しています。
テンプレートの修正箇所
ファイル内の序盤のところにデフォルトのCSSを読み込んでいる部分があります。
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<!-- for original theme CSS -->
この「default.css」の直下に下記のように追加してください。
※追加したいCSSが「orgstyle.css」の例
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/orgstyle.css">
<!-- for original theme CSS -->
あとはオリジナルのCSSに記載していくだけでデザインの変更が可能になります。
オリジナルCSS追加したらテストしてね
必ず何かしらの変更を加えたら動作確認をするクセを付けましょう。
オリジナルのCSSにタイトルの色変更など好きな記述を書いて、実際に自作CSSの内容が反映されるかテストをしてくださいね。
もちろん、EC-CUBE3管理画面でのキャッシュクリアを忘れずに。
