カラーミーショップ　新着情報の使い方

Tweet

Pocket

カラーミーショップはページのカスタマイズができるため、オリジナルデザインのショップが作れるサービス。用意されたかラーミータグを使って情報を出力するだけなので比較的簡単にショップ構築が可能です。

このページではショップになくてはならない「お知らせ」機能を実装できる新着情報を表示する方法を紹介します。

カラーミーショップで新着情報を使う方法

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

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

新着情報で使えるカラーミータグ

新着情報で使える独自タグは以下の３つ。詳細はカラーミーマニュアルにも記載されています。

新着情報の使い方

新着情報を表示したい位置にコードを貼り付けるだけでOK。コードは管理画面から取得することができます。

<!-- 新着情報があれば表示 -->
<{if $news != ""}>
  <ul>
    <{section name=num loop=$news}>
      <li>
        <!-- 日付 -->
        <{$news[num].date}> 
        <{if $news[num].link_url != ""}>
          <!-- リンク付き新着情報を表示 -->
          <a href="<{$news[num].link_url}>"><{$news[num].message}></a>
        <{else}>
          <!-- リンクなし新着情報を表示 -->          
          <{$news[num].message}>
        <{/if}>
      </li>
    <{/section}>
  </ul>
<{/if}>

新着情報にはブログ記事のように画像やタイトルをつけることができないため、上記のようなシンプルなリスト表示だけで使用することができます。

ここに新着情報の見出しを追加したり、スタイルを修正してリストをスクロール表示させるだけで、お知らせコンテンツもあっという間に作成可能。

<div class="news">
    <h2 class="news-title">新着情報</h2>
    <{if $news != ""}>
    <ul class="news-body">
        <{section name=num loop=$news}>
        <li>
            <!-- 日付 -->
            <{$news[num].date}> 
            <{if $news[num].link_url != ""}>
            <!-- リンク付き新着情報を表示 -->
            <a href="<{$news[num].link_url}>"><{$news[num].message}></a>
            <{else}>
            <!-- リンクなし新着情報を表示 -->          
            <{$news[num].message}>
            <{/if}>
        </li>
        <{/section}>
    </ul>
    <{/if}>
</div>