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

Pocket

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

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

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

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

カラーミーキットとは?

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

カラーミーキット
カラーミーキットの使い方、グリッド編-01

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

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

カラーミーキット ドキュメント
カラーミーキットのドキュメント-03

カラーミーキットと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>

カラーミーキットのデフォルトレイアウト-04

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

画面サイズとclassの書き方はドキュメントにも記載されているのでそちらを参考にしてください。
カラーミーキットのブレークポイント-05

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

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

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

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

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

<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も12カラムになっています。これをスマートフォンサイズに限定したい場合は、以下のように画面サイズの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が1列で表示され、タブレットではPC同様2列で表示されるようになります。

まとめ

このようにカラーミーキットのグリッドを使えば簡単にコンテンツの幅を変更可能です。画面サイズごとに指定することもできるので、レスポンシブ対応もさくっと完了してしまうのがCSSフレームワークの良いところですね。

次回はカラーミーキットの便利な機能の1つである、アイコンの使い方を紹介したいと思います。

こちらのショップでは既にレスポンシブ化したテンプレートを販売中。価格もお手頃なので是非チェックしてみてくださいね!
カラーミーキットを使用したレスポンシブテンプレート!