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

Pocket

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

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

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

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

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

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

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

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

<!-- おすすめ商品 -->
<{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(スマートフォン)サイズなら12カラム、それ以外は4カラム分使用する意味です。

Bootstrap同様、画面を12分割しているので、4カラムなら3列で表示ということになります。3列を4列で表示したい場合はcol-lg-4col-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-4col-lg-6にすれば商品を2列で表示することができます。

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

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

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

<!-- 商品リスト -->
<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>
<!-- // 商品リスト -->

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

<!-- 商品リスト -->
<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>
<!-- // 商品リスト -->

まとめ

この他のページでも表示する列数(カラム数)を変更する方法は同じ。col col-xs-12 col-lg-4などの記述を探して数字の部分を書き換えるだけでカスタマイズが可能です。