カラーミーキットで効率的にショップを構築できる!

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーキットについて知りたい
という方のために、カラーミーキットについて解説をします。

この記事を読むことで、

  1. カラーミーキットがどのようなものかわかる
  2. カラーミーキットどのように使うのかわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではカラーミーキットについて解説していきます。

 

カラーミーキットとは?

カラーミーショップは、

初心者でも簡単にネットショップを作れることから人気が高いサービスです。

テンプレートを切り替えるだけではなく、HTMLやCSSを編集することができます。

そのため、オリジナルのネットショップを作成することができます。

テンプレートデザイン用CSSキットがカラーミーキット

カラーミーキットは、カラーミーショップで使える無料のテンプレートです。

カラーミーキットを使用した場合、

HRMLのhead部分にcolormekitというCSSファイルが読み込まれるようになります。

colormekitというCSSファイルによって、

レスポンシブレイアウト向けのスタイルやグリッドスタイルが挿入されます。

カラーミーキットには、Bootstrapに似たドキュメントも用意されているため、

分かりやすさにも定評があります。

classによって使い方や機能に違いがあるため、

実装される機能についてはドキュメントで確認しておくことをおすすめします。

Bootstrapと似ているけれど別物

カラーミーキットとBootstrapはとてもよく似ていますが、実際は別物です。

ここでは、どのような違いがあるかを紹介します。

カラーミーキットのCSSファイルを確認してみると、

Bootstrap2がベースとなって構築されています。

しかし、spanがcolになっているほか、一部のclassが変更されているため、

全く同じというわけではありません。

Bootstrap2で使用できる機能を全部使うことはできないです。

カラーミーキットの導入

カラーミーキットを導入する際には、その手順や注意点について知っておく必要があります。

カラーミーキットの導入の手順

カラーミーキットの導入の手順は以下の通りです。

  1. ファイルをダウンロードする
    はじめに、ファイルをダウンロードします。
    ダウンロードする前に、「使用許諾に関する注意事項」に目を通してください。
  2. 「カラーミーキット(2カラム)」を追加する
    ファイルをダウンロードしたら、「カラーミーキット(2カラム)」というテンプレートをカラーミーショップの管理画面から追加します。
  3. テンプレートを更新する
    テンプレートを追加したら、HTMLとCSS編集を開き、解凍したファイルの内容を上書きでコピペしてください。
    解凍したファイルは、対応する場所にコピペして保存します。
  4. レスポンシブに切り替える
    完了したら、スマートフォンでPCテンプレートに設定されているかチェックします。
    PCテンプレートになっていない場合は、「変更する」をクリックして切り替えてください。
  5. 動作を確認する
    全て完了したら、正しく動作するかチェックしてください。

テンプレート使用の注意点

テンプレート使用の注意点についても把握しておく必要があります。

配布されているテンプレートは無償サポートが行われていません。

個別の対応が必要になる場合は、有償でのサポートです。

表示崩れに関しては、適宜修正用のダウンロードファイルが更新されます。

その場合、中身をいじっている場合追加で修正した部分が消えてしまうので注意が必要です。

そのため、自分でカスタマイズする場合は、あらかじめメモしておくことをおすすめします。

カラーミーキットの使い方

ここでは、カラーミーキットをより効率的に使うための使い方について解説していきます。

グリッドレイアウトの使い方

カラーミーキットのグリッド用classは、#contentsと#sideの2ヶ所に使われています。

それぞれの画面サイズの中で、どのくらいの幅になるのかを指定しています。

画面サイズとclassの書き方に関しては、ドキュメントにも書かれているため、

それを参考にしてみてください。

幅は、Bootstrapと同じく合計を12カラムにしなければいけません。

初期設定では、#cotnensは9カラム、#sideが3カラムの合計12カラムという設定になっています。

カスタマイズするには?

グリッドレイアウトのデフォルトは、固定ではないため自由に変更可能です。

#sideの幅を広くしたい場合は、#sideのカラム数を増やすだけで適用となります。

ただし#sideを幅広くした分、#contentsのカラム数を減らさなければいけません。

#contentsと#sideの合計カラム数が12になることによって、

正しく表示されるようになるからです。

カラーミーキットのアイコン

カラーミーキットのアイコンは、16pxと24pxの2種類があります。

アイコンの情報をclassに適用することにより、アイコンの色を変更可能です。

カラーミーキット(2カラム)の場合は、一部のCSSだけが実装となっているため、

CSSから使用するアイコンを選ばなければいけません。

使用できるアイコンの形に関しては、ドキュメントに記載されています。

そのため、設定する前に確認しておきましょう。

カラーミーキットでより魅力的なサイトを構築しよう

カラーミーキットを使用することで、カラーミーショップがより使いやすく、

魅力的なものに仕上がります。

HTMLやCSSの編集ができるという人は、

ぜひカラーミーキットの利用も検討してみてください。

今回の記事で紹介した導入手順を参考にすることで、

魅力的なショップを構築できるようになります。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。