カラーミーショップ

カラーミーショップ　トップページバナーの使い方、設置方法

2017-06-19

Pocket

カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。

このページではショップにバナーを設置する方法を紹介します。

カラーミーショップでトップページバナーを使う方法

トップページバナーを使うにはカラーミーショップのテンプレートプラス（もしくはレギュラープラン以上）の契約が必要です。

契約後、管理画面でトップページバナーの設定を行い、HTML編集エリアにテンプレートコードを追加することで使用可能になります。

トップページバナーで使えるカラーミータグ

画像を表示するだけなのでタグは１つだけ。

タグ名	機能
eyecatch	トップページバナーの表示

トップページバナーの使い方

カラーミーショップでトップページバナーを表示するには設置したい場所に以下のコードを追加するだけ。コードは管理画面のトップページバナー設定ページから取得できます。

<{if $eyecatch != ""}>
  <div class="free">
    <{$eyecatch}>
  </div>
<{/if}>

カラーミーショップに複数のバナー画像を表示したい場合

トップページバナーは１枚しか登録できないため、複数のバナーを表示したい場合には不向き。そんな時は画像ファイルをアップロードして、imgタグのsrcに画像のURLを貼り付けることで実装できます。画像のアップロード方法に関してはこちらのマニュアルをご覧ください。

<!-- srcにアップロードした画像のURLを貼り付ける -->
<img src="ここに画像のURLを貼り付け" alt="画像の説明文をここに記述"/>

バナー画像を複数列で表示したい場合

１枚の横長の画像を縦に並べていくのなら１列でも問題ないのですが、四角や縦長のバナーの場合縦１列だと困りますよね。そんな時はグリッド表示することで横並びのバナーエリアを作ることができます。

CSSで記述するのは大変なのでカラーミーキットを使って実装してみます。

<section class="banner-yoko">
    <div class="col col-lg-4">
        <img src="画像のURLをここに記述" alt="dammy"/>
    </div>
    <div class="col col-lg-4">
        <img src="画像のURLをここに記述" alt="dammy"/>
    </div>
    <div class="col col-lg-4">
        <img src="画像のURLをここに記述" alt="dammy"/>
    </div>
</section>