マウス操作のみのカスタマイズ
ネットショップにとって、画面のデザインは重要な意味を持ちます。見やすい画面、使いやすい画面、店や商品のイメージにあった画面にできるかできないかで、売り上げが大きく変わったりします。せっかくお客様がショップに訪れてきてくれたとしても、デザインがみすぼらしかったために買わずに去っていくことだってあり得るのです。
そこで、EC-CUBEでは、デザインも自由自在にカスタマイズできるようになっています。特に初心者でも簡単にショップ画面のレイアウトを変更することができるように、マウス操作のみでレイアウトを変更できる機能を搭載しています。また、サイト作りに詳しい方には、ソースコードレベルで、より高度なレイアウト変更ができるような仕組みも用意されています。
まずは、マウス操作のみの、簡単なレイアウト変更の方法から説明していきましょう。
ブロック単位のレイアウト編集
EC-CUBEでは「レイアウト設定」をクリックすると現れるレイアウト編集の画面で、ブロック単位の移動を簡単に行うことが可能です。
具体的な手順は、以下の通りです。
①以下は、変更前のショップ画面です。この「ログイン」を左側のフィールドの下部に表示されるように変更します。
②「デザイン管理＞PC＞レイアウト設定」をクリックして、レイアウト編集の画面を表示します。
③「ログイン」を左側のフィールドにドラッグアンドドロップで移動します。そして、「登録する」ボタンを押します。
④再度トップページにアクセスすると「ログイン」が左側に移動していることが確認できます。
再度トップページにアクセスすると、「カゴの中」が右側に動いていることが確認できます（※なお、③の段階で、プレビューボタンを押せば、保存前にデザインを確認することができます）。
一つのブロックを全画面に表示させる
全画面に表示させたいブロックがある場合、全てのページにブロックを配置していく必要はありません。ワンクリックで簡単に全画面にブロックを設置することが可能です。
ここでは「カレンダー」ブロックを全ての画面の左側フィールドに表示させてみることにします。
①以下は、商品一覧画面です。インストール初期の状態では、「カレンダー」ブロックは設置されていません。全画面に「カレンダー」ブロックを配置するよう設定して、表示されるか確認してみましょう。
②「デザイン管理＞PC＞レイアウト設定」のTOPページ編集画面を表示します。
③「カレンダー」ブロックを左側フィールドに移動し、ブロック内の「全ページ」チェックボックスにチェックを入れます。
④これで、全ての画面で「カレンダー」ブロックが表示されます。商品一覧画面にも「カレンダー」ブロックが表示されたことが分かります。
ブロックを追加する
最初に設定されている9つのブロックの他に、新しいブロックを独自で追加することもできます。バナーや外部サービスのパーツなどを設定すると利用しやすいでしょう。
①画面右「ブロックを新規入力」をクリックします。
②ブロック編集画面が現れます。
③ブロック名に「ブロックテスト」、ファイル名に「bloctest」、内容には「」と入力し、最後に「登録する」を押してください。
④「デザイン管理＞PC＞レイアウト設定」へ移動すると、先ほど登録したブロックテストが「未使用ブロック」として登録されています。
⑤これをメインの上に移動し、「登録する」ボタンを押します。
⑥これで新たなブロックが追加されました。フロントページのトップページで、メイン画像の上に「テスト」と表示されていれば成功です。