カラーミーショップのECサイト構築 ショップ情報の設定やからデザインテンプレートの編集まで解説

ホームカラーミーショップのECサイト構築テンプレートの共通HTML・CSS編集

テンプレートの共通HTML・CSS編集

ECサイトの基本レイアウトはヘッダー、左メニュー、フッターの共通部分となる大枠があり、その中身としてトップページ>商品カテゴリページ>商品ページという階層でページ構成されているサイトだと思います。このページではサイトの共通部分となる大枠部分を編集する方法に関してご説明させて頂きます。

まずは編集元にするテンプレートを選択する

カラーミーの管理画面にて、ショップ作成>デザインへお進み頂きますと、ベースとなるデザインテンプレートを選択する画面に移行します。最初はお申込み時に設定された基本テンプレートになっておりますので、【テンプレート追加】ボタンを押しますと様々なテンプレートが選択できます。

選択したテンプレートを編集してみる

前述の方法でベースとなるデザインテンプレートを選択しましたら、それを元に共通部分のヘッダー、左メニュー、フッターを編集していきます。管理画面にて、ショップ作成>デザインへお進み頂きますと選択してテンプレートが表示されますので、【テンプレート編集】ボタンを押します。

すると次に下図の編集部分がリスト化されたページが表示されます。主に編集する機会が多い箇所は赤枠になっている箇所です。この箇所のリストの右側にあるHTML・CSS編集ボタンを押しますと、HTML編集画面に移行しますので、そこでHTMLカスタマイズを行うことができるという仕組みになっております。

このページではサイトの共通となるヘッダー、左メニュー、フッターの編集をご説明させて頂きますので、上図の【共通】という箇所のHTML・CSS編集ボタンを押します。そして表示されたソースがサイトのお枠となるヘッダー、左メニュー、フッターのHTMLソースになりますので、この編集画面から任意にHTML編集、カスタマイズができるという訳です。