テンプレートのインストール方法

テンプレートのインストールは初心者モードでも可能ですが、一部操作で上級者モードでの操作が必要になるため、上級者モードでの方法を記載しています。

1.新規テンプレートの作成

ColorStockはカラーミーキット専用のテンプレートとなっております。まず初めにカラーミーキットの追加を行います。

1-1: 管理画面メニューのショップ作成->デザイン設定画面からテンプレートの追加ボタンを押して下さい。 追加ボタン

1-2: 次の画面で無料テンプレートを選択します。 選択

1-3: 無料テンプレートの中からカラーミーキットを探して追加します。 カラーミーキット

1-4: カラーミーキットのテンプレートが追加されればテンプレートの追加は完了です。 カラーミーキットの追加

もし追加可能数の上限に達している場合は変更してもよいテンプレートを削除して上記の操作を行って下さい。

2.テンプレートコードのコピー

テンプレートが追加された直後はカラーミーキットのデフォルト状態となっています。ここにColorStockのテンプレートコードをコピーしていきます。

2-1: 追加したテンプレートのカスタマイズボタンを押します。 カスタマイズ

2-2: ボタンを押すと追加したテンプレートのカスタマイズページが開きます。 ページを開く

2-3: 共通エリアのHTML/CSS編集ボタンを押します。 HTML/CSS

2-4: HTMLとCSSの編集ページが表示されます。 表示

2-5: 共通エリアのテンプレートを編集ページのテキストエリアにコピーします。zipファイルを解凍したフォルダの中から1-global.htmlを選択してファイルを開きます。

2-6: ファイルを開いたら、テンプレートファイル内のコードをコピーし、テキストエリアにペーストして下さい。

2-7: ペーストできたら更新ボタンを押して保存します。 更新

2-8: 同様にして他のエリアのHTML/CSSも貼付けていきます。

CSSスタイルの貼付けは、共通エリアのみです。これ以外のページ(CSSのみ編集できるページを除く)にあるCSSは削除して下さい。

  • style.css: 共通ページのCSS
  • 2-top.html: トップページのHTML
  • 3-product-list.html: 商品一覧ページのHTML
  • 4-product-detail.html: 商品詳細ページのHTML
  • 5-shop.html: 特定商取引ページのHTML
  • 6-product-search.html: 商品検索結果ページのHTML
  • 7-option.html: オプション在庫・値段表ページのHTML
  • 8-privacy.html: プライバシーページのHTML

テンプレート番号3〜8のページのスタイルはstyle.css内で全て作成されています。 この他のページ(お問い合わせや決済など)のテンプレートやスタイルは商品に含まれていません。CSSスタイルはカラーミーキットのものをそのまま使用して下さい

3.レスポンシブテンプレートをスマートフォンで表示するための設定

カラーミーショップの初期状態では、スマートフォンからアクセスするとスマートフォンテンプレートに切り替わります。

スマートフォンでもPC用テンプレートを表示するためには設定を変更する必要があります。

3-1: 管理画面メニューのショップ作成->スマートフォンショップ設定をクリックします。 ショップ設定

3-2: スマートフォン表示モード設定を、PC版表示に変更してください。 PC表示

以上でインストール完了です。

results matching ""

    No results matching ""