前回までの設定でネットショップをオープンするための必要最低限の変更を行いました。
始めのうちはその状態でしばらく運営をしても問題ないと思いますが、慣れてくるともう少し変更したいという欲が出てくる人もいると思います。
そこで今回はプログラミング経験がない人でも見よう見まねで出来てしまうEC-CUBEのトップ画面のちょっとしたカスタマイズをご紹介します。
同じようにやれば同じ画面ができますので億さず是非挑戦してみてください。
出来上がりのトップページ画面
それでは早速始めましょう。
トップページをカスタマイズ
EC-CUBE3はトップページのコンテンツを管理しやすいようにブロックという単位で構成されています。
下図の黄色枠で囲まれた単位がブロックおよびブロック名称です。
EC-CUBEの管理画面で、このブロック単位の配置換えや削除を行うことができます。
そこで今回のカスタマイズでは以下の2ブロックを削除してみます。
※削除といっても画面に表示させなくするだけで必要になったら戻せますのでご安心ください。
①「フリーエリア」ブロック
②「ギャラリー」ブロック
①に関しては、開店記念として送料無料を行う場合には削除する必要はありませんが、まずは堅実に商売を始めるということで、セールなどはせずしっかり利益を取れる体制を整えたほうが良いと思いますので、一旦削除します。
②に関しては、お店を始めたばかりだと商品点数が少ないことも考えられます。
「ギャラリー」が空きだらけだとあまり見栄えも良くありませんので一旦削除します。
トップページのレイアウト編集
「EC-CUBE管理画面」ー「コンテンツ管理」ー「ページ管理」を開き、「TOPページ」の右側にある「・・・」をクリックし、「レイアウト編集」を選択します。
TOPページのレイアウト編集画面が開いたら、「フリーエリア（□全ページ）」と「ギャラリー（□前ページ）」ブロックをそれぞれドラッグ&ドロップで、右上の「未使用ブロック」エリアへ移動させてください。 
移動させたら、画面右上にある「登録」ボタンをクリックしてください。
登録が完了したら、ネットショップのトップ画面を開いて「フリーエリア」ブロックと「ギャラリー」ブロックがなくなっていることを確認してください。
これでブロック削除は完了ですが、「フリーエリア」ブロックを削除したことで「新着情報」ブロックの右側にスペースができてしまっています。
そこで、このスペース部分まで「新着情報」ブロックを広げたいと思います。
新着情報ブロックの拡張
「フリーエリア」ブロックを削除したことにより出来てしまったスペースに「新着情報」ブロックを拡張します。
「EC-CUBE管理画面」ー「コンテンツ管理」ー「ブロック管理」を開き、ブロック一覧の中から「新着情報」の右側にある「・・・」をクリックし、「編集」を選択します。
ブロック編集画面で下図のように<div class=”col-sm-9 news_contents”>」と記載されている部分を探し、数字の9の部分を12に書き換えてください。
| 豆知識
EC-CUBE3ではbootstrapが使われています。 |
書き換えたら、右上の「登録」ボタンをクリックしてください。
登録が完了したら、ネットショップをトップページを表示し、「新着情報」ブロックが拡張されたことを確認してください。
以上で「新着情報」ブロックの拡張は完了です。
コメント