EC-CUBE【EC-CUBE4系】デザイン変更について2018.10.21EC-CUBE4.0.0正式版がリリースされましたが、皆さんはインストールはしてみましたか?インストールをしてみると分かるのですが、フラットデザインでどのような分野にも使えそうなスッキリとしたサイトになっています。レスポンシブになっているので、ボタンなどは画像ではなくテキストです。その為、デザインの知識が無くても変更が容易になっています。初期テンプレートのままでもサイトはOPENできそうですが、最低限直したい箇所があるかと思います。今回は、最低限の変更方法についてまとめてみました。ファビコン初期の状態ですとEC-CUBEのロゴが表示されていますので、まずはファビコンの変更をしたいと思います。1.ファビコンは、「/html/template/default/assets/img/common/favicon.ico」にある「icoファイル」が読み込まれています。変更後のicoファイルを用意してください。※この時に、ファイルの名前を「favicon.ico」にしておくとファイルの変更だけですみますので、楽になります。2.こちらは管理画面からの変更ができませんので、FTPソフトを使いファイルをアップしてください。TOPページを見ると、初めに目に入るのが「大きな画像のあるスライダー」だと思います。1.こちらの変更方法ですが、ファビコンと同様に管理画面から変更ができません。FTPソフトを使い「/src/Eccube/Resource/template/default/」に移動すると、「index.twig」というファイルがあります。こちらをダウンロードしていただき、編集いたします。2.index.twigを見ると、以下のような記載があります。}}"></div>を追記すれば、追加できます。class="ec-sliderRole">~</div>までを削除してください。新入荷商品特集~カテゴリ、フッターTOPページの新入荷商品特集~カテゴリ、フッターは、先ほどまでの変更方法とは少々違います。HTMLのコードに関しては、管理画面から変更ができます。※画像ファイルのアップロードは、「FTPソフト」か「コンテンツ管理のファイル管理」を使ってください。1.HTMLコードの変更ですが、「管理画面」-「コンテンツ管理」-「ブロック管理」にある該当するブロックの編集ページから行えます。2.編集画面からHTMLコードを変更する。※EC-CUBE4系では、「Twig」というテンプレートエンジンを使っていますので、見慣れているHTMLコードとは少々違う部分があります。デザインを変更したい場合は管理画面から変更できますが、情報の登録だけでしたら管理画面から追加ができます。1.「管理画面」-「コンテンツ管理」-「新着情報管理」に移動2.新規作成ボタンから、登録ページへ移動。3.公開日時、タイトル、URL、本文を入力して、登録をしてください。4.公開・非公開もできますので、必要に応じてステータスを変更してください。まとめその他のページも、上記で記載した方法で変更ができます。FTPソフトや管理画面など、複数の場所からの変更になってしまいますが、TOPページの調整を行ってしまえば、サイトをオープンしてもおかしくはないデザインだと思います。