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

Pocket

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

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

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

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

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

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

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

タグ名 機能
date 公開日付
link_url 設定したURL
message お知らせ内容

新着情報の使い方

新着情報を表示したい位置にコードを貼り付けるだけで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>

カラーミーショップの新着情報をカスタマイズ