カラーミーショップ　カレンダー機能の使い方

Tweet

Pocket

カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。TetraThemesではレスポンシブに対応したデザインテンプレートを販売中！

このページではショップの営業日を表示するのに役立つカレンダーの使い方を紹介します。

カラーミーショップでカレンダーを使う方法

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

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

カレンダーで使えるカラーミータグ

カレンダーで使える独自タグは以下の２つだけ。カレンダーのテーブル出力は<{$calendar}>だけなので設置も簡単。

カレンダーの使い方

カラーミーショップでカレンダーを表示するには設置したい場所に以下のコードを追加するだけ。コードは管理画面の営業日設定ページから取得できます。CSSスタイルも用意されているので、必要ならCSS編集エリアに貼り付けておきます。

<{if $calendar != ""}>
  <div class="side_section side_section_cal">
    <div class="side_cal">
      <{$calendar}>
    </div>
    <{if $calendar_memo != ""}>
      <div class="side_cal_memo">
        <{$calendar_memo}>
      </div>
    <{/if}>
  </div>
<{/if}>

実際にはタイトルを入れたり、枠で囲ったりすると思うのでこのような構造にすると便利です。

<!-- カレンダーが設定されていれば表示 -->
<{if $calendar != ""}>
<div class="calendar">
    <h4 class="calendar-title">カレンダー</h4>
    <div class="calendar-body">
        <!-- カレンダーの表示 -->
        <{$calendar}>
        <!-- 注意書きがあれば表示 -->
        <{if $calendar_memo != ""}>
            <p><{$calendar_memo}></p>
        <{/if}>
    </div>
</div>
<{/if}>