カラーミーショップ

カラーミーキット初心者のための、レイアウトの作り方

2016-01-25

初心者でも簡単にネットショップを作ることができることで人気のカラーミーショップ。テンプレートの切り替えだけでなく、自分でHTMLやCSSを編集できるので、完全オリジナルなショップも作成可能です。テーマも公開されており、自分のショップにあったテーマを選べるようになってます。

数多くあるテーマの中でもおすすめなのがカラーミーキット。CSSフレームワークとして提供されており、簡単にレスポンシブレイアウトを作成できるなど便利な機能満載です。ただ、CSSフレームワークの使い方を知らないとちょっと難しいところもあるかもしれません。

このページではカラーミーキット初心者さんのためのグリッドレイアウトを正しく構築する方法を紹介します。

カラーミーキットの簡単な使い方グリッド編

カラーミーキットとは？

まず簡単にカラーミーキットについて確認しておきましょう。カラーミーキットはカラーミーショップで使える無料テンプレートとして提供されています。

カラーミーキット

この無料テンプレートを使用すると、HTMLのhead部分にcolormekitというCSSファイルが読み込まれるようになります。このCSSファイルにレスポンシブレイアウト向けのスタイルやグリッドスタイルが記述されているわけです。

また、カラーミーキットにはBootstrapのようなわかりやすいドキュメントも用意されています。各classの使い方やどんな機能が実装されているかはドキュメントで確認しておきましょう。

カラーミーキットドキュメント

カラーミーキットとBootstrapはどう違うの？

カラーミーキットのCSSファイルをみると分かるように、カラーミーキットはBootstrap2をベースに作成されています。ただ、一部のclass名（spanがcolに）が変更されていたり、Bootstrap2の全ての機能が使えるわけではないので注意して下さい。

カラーミーキットグリッドレイアウトの使い方

ここからはグリッドレイアウトの使い方を紹介します。基本的にはドキュメントに記載されているので、そちらも合わせてご覧ください。

カラーミーキットのインストール方法は無料テンプレートと同じです。カラーミーキットをインストールした直後の初期状態で、レイアウト部分だけを抜き出すと以下のようになります。

<div id="wrapper" class="container mar_auto pad_t_20">
  <div id="header" class="mar_b_30">

    <!-- 省略 -->

  </div>
  <div class="row">
    <div id="contents" class="col col-lg-9 col-sm-12 mar_b_50">

      <!-- 省略 -->

    </div>
    <div id="side" class="col col-lg-3 col-sm-12 mar_t_20 mar_b_50">

      <!-- 省略 -->

    </div>
  </div>
  <div id="footer" class="pad_v_30 bor_t_1 txt_c">

    <!-- 省略 -->

  </div>
</div>

グリッド用classが使われているのは、#contentsと#sideの２カ所。どの画面サイズでどれくらいの幅にするかを指定しています。

画面サイズとclassの書き方はドキュメントにも記載されているのでそちらを参考にしてください。

幅についてはBootstrapと同様、合計で１２カラムになります。カラーミーキットの初期状態では、#cotnensが９カラム、#sideに３カラムで合計１２カラムとなっています。

一方タブレットサイズまではどちらも１２なので、#contentsと#sideが１列で表示されるようになります。

グリッドレイアウトのカスタマイズ方法

デフォルトのレイアウトは固定ではなく、自由に変更できます。例えば#sideの幅をもう少し広くするには、#sideのカラムの値を増やし、その分#contentsの値を減らします。

合計で１２になるように調整することで正しく表示されるようになります。

<div class="row">
  <div id="contents" class="col col-lg-8 col-sm-12 mar_b_50">

    <!-- 省略 -->

  </div>
  <div id="side" class="col col-lg-4 col-sm-12 mar_t_20 mar_b_50">

    <!-- 省略 -->

  </div>
</div>

上記の例ではタブレットサイズ（sm）までは#contentsも#sideも１２カラムになっています。これをスマートフォンサイズに限定したい場合は、以下のように画面サイズのclass名を変更すればOKです。

<div class="row">
  <div id="contents" class="col col-lg-8 col-xs-12 mar_b_50">

    <!-- 省略 -->

  </div>
  <div id="side" class="col col-lg-4 col-xs-12 mar_t_20 mar_b_50">

    <!-- 省略 -->

  </div>
</div>

こうすることでスマートフォンでは#contentsと#sideが１列で表示され、タブレットではPC同様２列で表示されるようになります。