これまで、EC-CUBEの基本設定からオリジナルテンプレートの登録、商品の登録と行ってきました。
今回はネットショップの顔となるトップページの修正です。
トップページの修正
ここまでの作業結果を反映したネットショップのトップページです。
まだEC-CUBEの初期値として登録されたサンプル文言や画像（上図の赤丸で囲まれた①～⑥の箇所）が表示されたままですので、これらを順番に変更していきたいと思います。
図中の番号を付与したセクションには、EC-CUBE上で管理するためそれぞれ以下のような名前がついています。
①ロゴ（ブロック管理）
②TOPページ（ページ管理）
③新着商品（ブロック管理）
④新着情報（新着情報管理）
⑤フリーエリア（ブロック管理）
⑥ギャラリー（ブロック管理）
※()内に記載されたEC-CUBE管理画面の「コンテンツ管理」で編集を行います。
それでは、順番に修正していきましょう。
なお、これらの作業が完了すると、ネットショップとしての体裁が一通りそろいますのでお店をオープンすることも出来るようになります。
頑張っていきましょう。
①ロゴ（ブロック管理）の修正
「くらしを楽しむライフスタイルグッズ」と表示されている部分を今回オープンするお店のキャッチフレーズに変更します。
EC-CUBE管理画面ー「コンテンツ管理」ー「ブロック管理」をクリックすると表示される「ブロック一覧」から、「ロゴ」ブロック右側の「・・・」をクリックし、編集を選択してください。
ロゴブロックの編集画面が表示されます。
編集画面内の「ブロックデータ」セクションに変更すべき文言「くらしを楽しむライフスタイルグッズ」が記載されている部分が見えるところまで右側に表示されているスライドバーを動かして移動してください。
該当の文言を見つけたら、変更したい文言に変更するか不要であれば文言を削除し、右上の「登録」ボタンをクリックしてください。
なお、文言を削除する場合は、前後のタグ（<p class=”copy”>・・・</p>）は削除せず、日本語の文言のみ削除してください。
今回は、文言を削除しました。
以上でロゴ（ブロック管理）の修正は完了です。
②TOPページ（ページ管理）の修正
TOP画面に表示されているスライド画像をオリジナルの画像に差し替えます。
EC-CUBEの初期値としてサンプル登録されている画像は、mv01.jpg～mv03.jpgの3個です。
オリジナル画像の準備
EC-CUBEにサンプル登録されている画像サイズに合わせてオリジナル画像サイズを作りましょう。
画像サイズは以下の通りです。
mv01.jpg～mv03.jpg ・・・ 1120×448px
photoshopやwindows標準のペイントブラシで作成しても良いですが、「Canva」などの無料のwebサービスでグラフィック画像を作ることもできます。
「Canva」は、デザインの専門家でなくても洗練されたグラフィック画像が作れてしまう非常に優れたサービスですので画像編集ソフトが手元にない方は、ぜひ一度使ってみてください。
きっとお役に立つと思います。
なお、「Canva」の使い方について、別記事「無料のグラフィックデザイン作成サービス「Canva」」で記載しておりますのでご参考にしてください。
オリジナル画像の差し替え
先ほど作成した画像をEC-CUBEに反映させましょう。
画像の差し替えには、今回もFFFTPソフトを使います。
FFFTPでエックスサーバーのFTPユーザー、パスワード等を登録して接続し以下のフォルダに先ほど作成した画像ファイル「mv01.jpg」～「mv03.jpg」を上書きコピーしてください。
{EC-CUBEインストールディレクトリ}\html\template\{テンプレート名}\img\top
※テンプレート名・・・オリジナルテンプレートを作成した時のテンプレート名
ファイルの上書きが完了したら、ネットショップのトップスライド画像が変わっていることを確認してください。
もし、画像が古いままの場合には、ページを開きなおしてください。
それでも古い画像のままの場合には、もう一度、ファイルの名前やコピー作業が間違っていない確認してください。
以上でTOPページ（ページ管理）の修正は完了です。
③新着商品（ブロック管理）の修正
トップ画面で一番多くの画像を掲載しているセクションです。
EC-CUBEの初期値としてサンプル登録されている画像は、img01.jpg～img09.jpgの9個です。
オリジナル画像の準備
EC-CUBEにサンプル登録されている画像サイズに合わせてオリジナル画像サイズを作りましょう。
画像サイズはそれぞれ以下の通りです。
img01.jpg、img02.jpg ・・・ 300×376px
img03.jpg～img05.jpg ・・・ 640×328px
img06.jpg～img09.jpg ・・・ 256×256px
トップスライド画像を作成したときと同様に「Canva」を使って作成すると良いでしょう。
オリジナル画像の差し替え
先ほど作成した画像をEC-CUBEに反映させましょう。
画像の差し替えには、今回もFFFTPソフトを使います。
FFFTPでエックスサーバーのFTPユーザー、パスワード等を登録して接続し以下のフォルダに先ほど作成した画像ファイル「img01.jpg」～「img09.jpg」を上書きコピーしてください。
{EC-CUBEインストールディレクトリ}\html\template\{テンプレート名}\img\top
※テンプレート名・・・オリジナルテンプレートを作成した時のテンプレート名
ファイルの上書きが完了したら、ネットショップの新着商品画像が変わっていることを確認してください。
もし、画像が古いままの場合には、ページを開きなおしてください。
それでも古い画像のままの場合には、もう一度、ファイルの名前やコピー作業が間違っていない確認してください。
メッセージおよびリンク（遷移）先の変更
先ほど差し替えた画像に合うようにメッセージおよび必要に応じて画像がクリックされた際のリンク（遷移）先の設定を行います。
これらの変更は、EC-CUBE管理画面ー「コンテンツ管理」ー「ブロック管理」ー「新着商品」の編集で行います。
編集画面が表示されたら下にスクロールしながら、変更したい文言が記載されている部分を探し、適宜文言を変更してください。
文言の修正が完了したら、必要に応じてリンク（遷移）先の設定をしましょう。
リンク先は、先ほど修正した文言の近くに記載されている”href=#”と記載されている部分です。
このままだと、対象部分をクリックしても現在いる画面が表示されるだけですが、#の部分を遷移させたいURLに書き換えれば、ユーザーがクリックした際にその設定先にページ遷移します。
例）「お気に入りのエスプレッソタイム」の画像または「read more」をクリックされた際に商品ページ「http://asspie.xsrv.jp/products/detail/3」に遷移させたい場合
※遷移先のURLが分からない場合は、実際にショップページで遷移させたいページを表示させ、ブラウザの上部に表示されているURLをコピー＆ペーストしてください。
修正前
| <div class=”row”> <div class=”col-sm-4 col-xs-12″> <div class=”pickup_item”> <a href=”#“> <div class=”item_photo”><img src=”{{ app.config.front_urlpath }}/img/top/img03.jpg”></div> <dl> <dt class=”item_name text-warning”>お気に入りのエスプレッソタイム</dt> <dd class=”item_comment”>コーヒータイムを上質な時間にしてくれる、口当たりのよさとデザイン性を兼ね備えたエスプレッソカップを集めました・・・</dd> <dd class=”more_link text-warning”>read more</dd> </dl> </a> </div> </div> |
修正後
| <div class=”row”> <div class=”col-sm-4 col-xs-12″> <div class=”pickup_item”> <a href=”http://asspie.xsrv.jp/products/detail/3“> <div class=”item_photo”><img src=”{{ app.config.front_urlpath }}/img/top/img03.jpg”></div> <dl> <dt class=”item_name text-warning”>お気に入りのエスプレッソタイム</dt> <dd class=”item_comment”>コーヒータイムを上質な時間にしてくれる、口当たりのよさとデザイン性を兼ね備えたエスプレッソカップを集めました・・・</dd> <dd class=”more_link text-warning”>read more</dd> </dl> </a> </div> </div> |
同じようにして必要箇所をすべて修正してください。
以上で新着商品（ブロック管理）の修正は完了です。
④新着情報（新着情報管理）の修正
サイトでのお知らせ等を掲載するセクションです。
このセクションには画像はありません。
テキストメッセージの変更だけで完了します。
テキストメッセージは、EC-CUBE管理画面ー「コンテンツ管理」ー「新着情報管理」ー「新着商品」の編集で行います。
最初にサンプル登録されているメッセージを削除してから、新規登録するようにしましょう。
新規登録画面が開いたら、項目に沿って登録していきましょう。
特に難しい部分はないと思いますが「URL」の項目には、詳細ページが存在する場合に設定しておくと便利です。
該当メッセージをクリックした際に、詳細ページへ遷移させることができます。
入力が終わったら、右上の「登録」ボタンをクリックしてください。
以上で、新着情報（新着情報管理）の修正は完了です。
⑤フリーエリア（ブロック管理）の修正
フリーエリアという名前から自由に使えるセクションという思惑なのでしょうか。
意図はともかく、新着情報のようにメッセージが多くなると古いメッセージが見えなくなっていってしまいますが、常に表示しておきたいようなメッセージを表示するのに使うと良いエリアです。
フリーエリアに表示されているメッセージは、EC-CUBE管理画面ー「コンテンツ管理」ー「ブロック管理」ー「フリーエリア」の編集で行います。
編集画面が表示されたら文言を変更後、右上の「登録」ボタンをクリックしてください。
なお、この「フリーエリア」セクションは不要だという場合には、セクション毎なくす方法がございます。
このセクション単位での構成変更は、別記事で掲載予定ですので、そちらをご参照ください。
以上で、フリーエリア（ブロック管理）の修正は完了です。
⑥ギャラリー（ブロック管理）の修正
EC-CUBEの初期状態のサンプルでは画像は一つも登録されておらず枠だけが表示されているセクションです。
おススメ商品や人気商品など、トップページに掲載しておくことでお客様の目につきやすくしたい商品の画像を登録しておくと良いでしょう。
オリジナル画像の準備
EC-CUBEにサンプル登録されている画像サイズに合わせてオリジナル画像サイズを作りましょう。
画像サイズは以下の通りです。
img10.jpg～img21.jpg ・・・ 628×628px
ここも、「Canva」を使って作成すると良いでしょう。
初期状態では、12個の画像を表示可能ですが、表示するものがそんなにない場合にはある分だけ作成すればよいと思います。
オリジナル画像の差し替え
先ほど作成した画像をEC-CUBEに反映させましょう。
画像の差し替えには、今回もFFFTPソフトを使います。
FFFTPでエックスサーバーのFTPユーザー、パスワード等を登録して接続し以下のフォルダに先ほど作成した画像ファイル「img10.jpg」～「img21.jpg」（作成した分だけ）を上書きコピーしてください。
{EC-CUBEインストールディレクトリ}\html\template\{テンプレート名}\img\top
※テンプレート名・・・オリジナルテンプレートを作成した時のテンプレート名
ファイルの上書きが完了したら、ネットショップのギャラリー画像が変わっていることを確認してください。
もし、画像が古いままの場合には、ページを開きなおしてください。
それでも古い画像のままの場合には、もう一度、ファイルの名前やコピー作業が間違っていない確認してください。
※表示させたい画像が少なく初期状態のグレーの画像を表示するのが気になる場合や、そもそもギャラリーセクション自体が不要という場合の対応方法は、別記事にて掲載したいと思いますのでそちらをご参照ください。
以上で、ギャラリー（ブロック管理）の修正は完了です。
さて、ここまできたらネットショップをオープンするための最低限の修正は完了です。
一度、ご自身で実際にネットショップでお買い物をしてみましょう。
気になるところがあれば修正してみてください。
コメント