カラーミーショップ

カラーミーキットで商品の表示列数を変える方法

2016-02-01

カラーミーショップで無料テンプレートとして使えるカラーミーキットでは、BootstrapっぽいCSSフレームワークが搭載されています。カラーミーキットの基本的な使い方は前回までのブログで書いたのでそちらを参考にしてみて下さい。カラーミーキット初心者のための、レイアウトの作り方

ここでは実際にカラーミーキットのカスタマイズ例として商品の列数（カラム数）を変更する方法を紹介します。

カラーミーキットで商品の列数を変えてみる

カラーミーキットにはBootstrap風のCSSフレームワークが搭載されており、レイアウト用classを使うことで簡単に列数などを変更することができます。

トップページのカラム数変更方法

まずはトップページの商品リストをカスタマイズしてみます。トップページにはおすすめ商品と売れ筋商品がありますが、どちらも同じレイアウトなので、ここではおすすめ商品をカスタマイズしていきます。

カラーミーキットをインストールした直後は以下のように３列のレイアウトになってます。

コードの内容はこんな感じ。

<!-- おすすめ商品 -->
<{if $recommend_num != 0}>
  <div class="mar_b_50">
    <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">おすすめ商品</h2>
    <ul class="row unstyled">
      <{section name=num loop=$recommend}>
        <li class="col col-xs-12 col-lg-4 recommend-unit pad_20 mar_b_30 txt_c">
          <!-- 省略 -->
        </li>
      <{/section}>
    </ul>
  </div>
<{/if}>
<!-- // おすすめ商品 -->

上記のコードの中で、表示される列数を決めているのは、col col-xs-12 col-lg-4の部分。画面サイズがxs（スマートフォン）サイズなら１２カラム、それ以外は４カラム分使用する意味です。

Bootstrap同様、画面を１２分割しているので、４カラムなら３列で表示ということになります。３列を４列で表示したい場合はcol-lg-4をcol-lg-3にすればOK。

<!-- おすすめ商品 -->
<{if $recommend_num != 0}>
  <div class="mar_b_50">
    <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">おすすめ商品</h2>
    <ul class="row unstyled">
      <{section name=num loop=$recommend}>
        <li class="col col-xs-12 col-lg-3 recommend-unit pad_20 mar_b_30 txt_c">
          <!-- 省略 -->
        </li>
      <{/section}>
    </ul>
  </div>
<{/if}>
<!-- // おすすめ商品 -->

col-lg-4をcol-lg-6にすれば商品を２列で表示することができます。

カラム数を変更するときは画面が１２分割されていることと、画面サイズごとにカラム数を設定できる点に注意すればそれほど難しくありません。

カラーミーキットの商品一覧ページでカラム数を変更する方法

商品一覧もトップページと同様３列表示になっています。記述もトップページのおすすめ商品と全く同じなので、変更方法も同じです。

<!-- 商品リスト -->
<ul class="row unstyled">
  <{section name=num loop=$productlist}>
    <li class="col col-xs-12 col-lg-4 productlist-unit pad_20 mar_b_30 txt_c">
      <!-- 省略 -->
    </li>
  <{/section}>
</ul>
<!-- // 商品リスト -->

こちらも最初３列なので４列に変更する場合は先ほどと同じように変更します。

<!-- 商品リスト -->
<ul class="row unstyled">
  <{section name=num loop=$productlist}>
    <li class="col col-xs-12 col-lg-3 productlist-unit pad_20 mar_b_30 txt_c">
      <!-- 省略 -->
    </li>
  <{/section}>
</ul>
<!-- // 商品リスト -->