【EC-CUBE4系】デザイン変更について

2018.10.21

EC-CUBE4.0.0正式版がリリースされましたが、皆さんはインストールはしてみましたか?
インストールをしてみると分かるのですが、フラットデザインでどのような分野にも使えそうなスッキリとしたサイトになっています。
また、レスポンシブになっているので、ボタンなどは画像ではなくテキストです。
その為、デザインの知識が無くても変更が容易になっています。

初期テンプレートのままでもサイトはOPENできそうですが、最低限直したい箇所があるかと思います。
今回は、最低限の変更方法についてまとめてみました。
ファビコン
初期の状態ですとEC-CUBEのロゴが表示されていますので、まずはファビコンの変更をしたいと思います。

1.ファビコンは、「/html/template/default/assets/img/common/favicon.ico」にある「icoファイル」が読み込まれています。
変更後のicoファイルを用意してください。
※この時に、ファイルの名前を「favicon.ico」にしておくとファイルの変更だけですみますので、楽になります。

2.こちらは管理画面からの変更ができませんので、FTPソフトを使いファイルをアップしてください。
階層は「/html/template/default/assets/img/common/」になります。
新入荷商品特集
TOPページを見ると、初めに目に入るのが「大きな画像のあるスライダー」だと思います。

1.こちらの変更方法ですが、ファビコンと同様に管理画面から変更ができません。
FTPソフトを使い「/src/Eccube/Resource/template/default/」に移動すると、「index.twig」というファイルがあります。
こちらをダウンロードしていただき、編集いたします。

2.index.twigを見ると、以下のような記載があります。

<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>

画像ファイルを指定の場所にアップロードしていただき、

<div class="item slick-slide"><img src="{{ asset('assets/img/top/×××.jpg') }}"></div>

を追記すれば、追加できます。
もし、スライダーを使わないのであれば、

<div class="ec-sliderRole">~</div>

までを削除してください。
新入荷商品特集~カテゴリ、フッター
TOPページの新入荷商品特集~カテゴリ、フッターは、先ほどまでの変更方法とは少々違います。
HTMLのコードに関しては、管理画面から変更ができます。
※画像ファイルのアップロードは、「FTPソフト」か「コンテンツ管理のファイル管理」を使ってください。

1.HTMLコードの変更ですが、「管理画面」-「コンテンツ管理」-「ブロック管理」にある該当するブロックの編集ページから行えます。
2.編集画面からHTMLコードを変更する。
※EC-CUBE4系では、「Twig」というテンプレートエンジンを使っていますので、見慣れているHTMLコードとは少々違う部分があります。

3.「登録ボタン」で保存できます。
新着情報
新着情報のデザインを変更したい場合は管理画面から変更できますが、情報の登録だけでしたら管理画面から追加ができます。

1.「管理画面」-「コンテンツ管理」-「新着情報管理」に移動

2.新規作成ボタンから、登録ページへ移動。

3.公開日時、タイトル、URL、本文を入力して、登録をしてください。

4.公開・非公開もできますので、必要に応じてステータスを変更してください。
まとめ
その他のページも、上記で記載した方法で変更ができます。
FTPソフトや管理画面など、複数の場所からの変更になってしまいますが、
TOPページの調整を行ってしまえば、サイトをオープンしてもおかしくはないデザインだと思います。
他のEC-CUBE関連記事
もしも1つのECサイトに全世界の商品が販売されているストアが存在していたらどうでしょうか? なんと、Amazonは現在それを実現するべく手を打っているのです。...
Instagramを利用する企業が続々と増え続けていますが、 今回は、そんなInstagramの運用によってどんな効果が期待できるのか。 そして、どのように...