テンプレートの初期設定

ロゴ画像の設定

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

setting1

ショップ情報記入ページでショップロゴ画像のhttpモードをONにし、「ファイルを選択」ボタンからロゴ画像を選択します。

setting2

ロゴ画像がアップロードできたら、ショップ情報編集画面の下にある更新ボタンを押して設定を更新します。
ショップのトップページをリロードすると、先ほどアップロードした画像が表示されています。

setting3

これでロゴ画像の設定は完了です。

サイト説明文の設定

COLORSTOREのテンプレートにはサイト説明文を表示できます。

setting4

この部分を変更するにはテンプレートの編集ページを開き、テキストを書き換える必要があります。

書き換える場所は、共通ページのヘッダーにあります。この部分のテキストを表示したいテキストに書き換えます。

サイト説明文が不要の場合は、「ここにサイトの説明文を追加」のテキストを削除してください。

setting5

テキストを書き換えたら、更新ボタンを押して設定を保存します。その後ショップのトップページをリロードすると書き換えたテキストが表示されます。

setting6

これでサイト説明文の設定は完了です。

スライダー画像の設定(ver1.2からの設定方法)

COLORSTOREのテンプレートではスライドショーを使った画像スライダーに対応しています。
インストール直後は画像が設定されていないため、なにも表示されません。

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

setting20

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

setting21

スライドショー設定の変更方法

テンプレートですでにスライドショータグを設置していますが、アニメーションスピードなどの設定を変更することができます。

変更するには、スライドショー設定画面下部にある設定を変更(スライド方法はフェードのみ対応)した後、出力用HTMLタグをコピーします。

setting24

setting22

コピーしたタグを共通ページに設置されているスライドショータグと入れ替えます。

setting23

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

スライダー画像の設定(ver1.1までの設定方法)

ver1.1までで採用していたFlexsliderは動作が不安定なため、カラーミー公式のスライドショーに変更となりました。

COLORSTOREのテンプレートではFlexsliderを使った画像スライダーが用意されています。
インストール直後は画像が設定されていないため、正しく表示されません。

setting7

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

画像を正しく表示するには、スライダーが設置されたページにあるimgタグの画像URLを設定する必要があります。
書き換える場所はテンプレートによって異なりますが、共通ページもしくはトップページに設置されているFlexsliderブロックにあります。

Flexsliderブロックの冒頭部分はjavascriptが記述されているため少し長くなっていますが、
Flexsliderブロックのimgタグに「画像1のURLをここに記述」のようなテキストがあるので、
この部分を先ほどアップロードした画像のURLと変更します。

setting8

上記の画像のように書き換える場所は1つの画像につき2カ所あります。2カ所とも同じURLを貼付けてください。

まず、アップロードした1つめの画像のURLをコピーします。

setting9

その後「画像1のURLをここに記述」のテキストを削除し、先ほどコピーしたURLを貼付けます。

setting10

もう一方にも同じURLを貼付けます。

setting11

これで1つめの画像貼り付けが完了しました。
残りの画像も同様の方法で貼付けてください。画像は4つ表示することができます。

setting12

スライダー画像を4つではなく、2つだけ表示したい場合は、スライダー画像の下部に表示されるサムネイル部分を不要な数だけ削除します。
初期状態では以下の画像の用に4つ設定できる場所があります。

setting13

表示したい画像数を減らすには、liタグごと削除してください。以下の画像では3枚めと4枚めを削除しています。

setting14

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

バナー画像の設定

COLORSTOREではバナーを設置できるブロックを用意しています。設置できる場所はヘッダー、メインエリアの2カ所です。

ヘッダーバナーは共通ページのヘッダー部分にあり、インストール直後は以下のように表示されます。

setting15

ヘッダーバナーを正しく表示するには、共通ページのテンプレートにあるimgタグのURLを書き換える必要があります。
共通ページの編集画面を開くと、HTML編集エリア内にヘッダーバナーがあります。

setting16

「バナー画像のURLをここに記述」のテキストを削除し、Flexsliderと同様の方法で画像URLを貼付けます。
画像のアップロード方法は、カラーミーショップマニュアルの画像ファイル管理をご覧ください。

画像を取得するには、管理画面メニューのショップ作成->画像ファイル管理をクリックし、画像管理画面で表示したい画像を選択して表示されたURLをコピーします。

setting17

ヘッダーバナーの設置はこれで完了です。

メイン用バナーは1〜3カラムのレイアウトを選択できます。必要に応じて複製や削除を行って下さい。

setting19

1カラムのバナーを3つ表示するには以下のようにします。タイトル部分はテキストの変更ができます。不要の場合は削除して下さい。

<!-- バナー メイン -->
<div class="ui-section">
  <div class="block-banner-main">
    <div class="section-title">
      <h2 class="title">キャンペーン</h2>
    </div>
    <div class="section-body">
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
    </div>
  </div>
</div>
<!-- /バナー メイン -->

以上でテンプレートの初期設定は完了です。