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

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

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

管理画面メニューのショップ作成->スマートフォンショップ設定をクリックします。設定画面が開くので、スマートフォン表示モード設定をPC版表示に変更してください。

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

ロゴ画像の設定

ロゴ画像を使用するには上級者モードの管理画面メニューから、ショップ作成->ショップ情報のページを開きます。

ショップ情報の設定画面が表示されるので、ロゴ画像をアップロードします。画像を使用しない場合はショップ名がテキストで表示されます。

ロゴ画像の設定

スライドショーの設定

テンプレートに設置されているスライドショーを使うためにはカラーミーショップ管理画面からスライドショー用の画像を設定する必要があります。

まずはスライドショーに表示したい画像をアップロードします。 画像のアップロード方法は、カラーミーショップマニュアルのスライドショー設定をご覧ください。

スライドショーの設定1

テンプレートにはすでにスライドショータグが貼付けられているため、画像をアップロードした時点でショップにスライドショーが表示されます。

スライドショーの設定2

これでスライダーの設定は完了です。

バナー画像の設定

インストール後はバナー画像の部分にダミー画像が表示されています。バナー画像を正しく表示するには、カラーミーショップ管理画面で画像をアップロードして、画像リンクの書き換えを行う必要があります。

まずはショップに画像をアップロードします。画像のアップロード方法はカラーミショップマニュアルをご覧ください。

アップロードした画像をクリックすると、画面下に画像のURLが表示されます。

バナー画像の設定1

このURLをコピーして、トップページのHTML編集エリアにあるバナー画像のimgタグにペーストします。

また、「ここはバナーのURLです」の部分にバナーをクリックした際のリンク先を、「ここはバナーのキャプションです」の部分にバナーの説明文を入れることができます。

<!-- 変更前 -->
<div class="col col-lg-4 col-md-6 mb-md-6">
  <div class="card-content">
    <div class="card-content__image">
      <a class="op-h-7" href="ここはバナーのURLです">
        <img class="img-responsive" src="https://placehold.it/800x400" alt="">
        <p class="fz-4 mt-3 mb-0 text-center">ここはバナーのキャプションです</p>
      </a>
    </div>
  </div>
</div>

<!-- 変更後 -->
<div class="col col-lg-4 col-md-6 mb-md-6">
  <div class="card-content">
    <div class="card-content__image">
      <a class="op-h-7" href="ここはバナーのURLです">
        <img class="img-responsive" src="https://img30.shop-pro.jp/..." alt="">
        <p class="fz-4 mt-3 mb-0 text-center">ここはバナーのキャプションです</p>
      </a>
    </div>
  </div>
</div>

初級モードでのスタイル変更を有効化する

初級モードでスタイルを変更される場合は、付属のCSSファイル内のコードを、共通ページのCSS編集エリアの下部に貼り付けてください。

初級モード用CSSファイルは、「1_global-option.css」です。このファイル内のコードを共通ページのCSS編集エリアの下部に貼り付けてください。

/* インストール時に貼り付けたCSSコードの下に初級モード用コードを貼り付け */
body {
  background-color: <{$page_bgcolor}>;
  background-image: url(<{$page_bgimg}>);
  color: <{$font_color}> !important;
}
a {
  color: <{$link_normal}> !important;
}
a:hover {
  color: <{$link_hover}> !important;
}

SNSリンクの設定

テンプレートによってはSNSリンクを設置できる場合があります。SNSリンクにURLを記述していただくことで有効化することができます。

<!-- 変更前 -->
<li>
  <a class="省略" href="#">
    <!-- 省略 -->
  </a>
</li>

<!-- 変更後 -->
<li>
  <a class="省略" href="ここにSNSアカウントのURLを記入">
    <!-- 省略 -->
  </a>
</li>

コピーライトの変更

デフォルトでコピーライト表記はカラーミーショップのものが表示されます。

ショップのコピーライトに変更する場合は、ショップ作成 -> ショップ情報ページにあるコピーライトの入力欄に記入してください。

入力例)

©️ 2014-2019 ショップ名 All Rights Reserved.

商品の追加時の注意点

商品にオプション(サイズやカラーなど)を追加する場合は、オプションの表示形式で「プルダウン形式」を選択してください。

そのほかのオプション(表形式)を選択されますと、正しく表示できない場合があります。