【EC-CUBE4】デザインカスタマイズ方法(CSS)

#技術系
written by 神聖眼鏡くん

どうも神聖眼鏡です。

先日眼鏡が洗濯機に入っているとは知らず、服たちと洗濯してしまい、傷だらけで帰ってきました。
非常に悲しいです…

今回はEC-CUBE4系でデザインをカスタマイズする方法を紹介いたします。

すでにある(style.css)CSSを編集する

一つ目の方法としてはすでに作成されている、CSSファイルを編集する方法です。
/html/template/default/assets/css/style.cssを編集します。

EC-CUBEのテンプレートのCSSの記述が書かれていますが、必要なところだけ追記、または修正します。

新規でCSSファイルを作成する

2つ目は新規でCSSファイルを作成する方法です。
/html/template/default/assets/cssファルダにcssファイルを作成します。
今回はsample.cssとして作成します。

次に作成したcssを読みこむ準備をします。
/src/Eccube/template/default/deafault_frame.twigをコピーします。

コピーした、default_frame.twigを/app/Customize/Resource/template/defaultにファイルを貼り付けします。
default_frame.twigを編集し、CSSを読み込ませます。

<link rel="stylesheet" href="{{ asset('assets/css/sample.css') }}">

39行目にもともとあるstyle.cssを読み込んでいる記述があるので、そのしたの行に追記します。

EC-CUBEに作成したcssファイルを読み込むことが完了したので、修正した内容をsample.cssに記述すればカスタマイズできます。

管理者画面からデザインを修正する

EC-CUBEの管理者画面にアクセスしサイドメニューの「コンテンツ管理」→「CSS管理」をクリックします。

CSS管理画面にアクセスができたら、テキストフォームにCSSの記述を書いていきます。
予測変換なども出てくるので、とても便利です!
記述書き終えたら、「登録」ボタンをクリックします。

登録が完了すると、cssファイルが自動生成されます。
/html/user_data/assetes/cssフォルダにcustomize.cssファイルが作成されたことが確認できます。

こちらはテキストエディタからも再編集可能です。
もちろん、再度CSS管理画面にアクセスすれば途中から編集することができます。

最後に

今回はEC-CUBEのデザインを編集する手順を紹介いたしました。
いくつか方法がありますので、状況に合わせて試してみてください。

最後までご覧いただきありがとうございました。

他のEC-CUBE関連記事
【EC-CUBE4】Windowsでのローカル開発環境構築

【EC-CUBE4】新規テーブル&カラム追加方法