カラーミーのレスポンシブ対応テンプレートを無料配布(おすすめ/自分で使う人用)

カラーミーショップのテンプレートには有料・無料がありますが、有料テンプレートを購入してネットショップを開業する方が大部分です。
理由は、カラーミーショップの無料テンプレートでは、レスポンシブ対応していないことも多く、必要な機能もたりていないことが多いためです。

レスポンシブ対応している無料テンプレートは、WASHI、nano、Bit、カラーミーキットの4つ。いずれもネットショップをバリバリやるには機能不十分です。

ということで、今回はカラーミーキットをベースに、ミニマルデザイン寄りの無料テンプレートを制作しました。カラーミーユーザー向けに、登録不要で無料配布しています。

カラーミーキットについて復習する

カラーミーキットはテンプレートのデザイン作業をより効率よくするフレームワークです。

カラーミーキット - ネットショップ作成サービス カラーミーショップ

ログイン周り、検索機能、サイドバー、商品並び、レスポンシブ対応CSSなどは実装済みですので、フレームワーク(テンプレ制作の枠組み)として使う分にはわりと便利です。

カラーミーキットをベースに、オリジナルのテンプレートを制作して、ネットショップを開業されている方もちらほらみかけます。

とはいえ、不足している機能を自分でつけなければいけませんので、ハードルの高い作業になります。


カラーミーキットに追加したい機能は、

  • スライドショー
  • PC用ヘッダーの商品メニュー(ドロップダウンメニュー)
  • スマートフォン用メニュー(ハンバーガーメニュー)
  • 商品詳細ページのレイアウト

今回配布するテンプレートは、手間のかかる機能設置とレイアウト調整をしています。
さらに細部にこだわりたい方は、余白の調整、フォントサイズ、装飾など各自でCSSを適用してください(印象が変わると思います)。

naeco.jpで配布するテンプレート(無料)

カラーミーキットにすぐ使う際にたりていない機能を実装して、いじりすぎない程度にスタイルを調整しています。


全体的に最大幅を広げて、フォントを游ゴシック体に変更しました。

トップページは、検索窓の影を消して、カートを見るを右上に移動して、商品間の余白を狭くしました(これだけでも雰囲気が大分よくなりました)。

デモサイト)https://naeco.shop-pro.jp/


商品詳細ページは、スライドショーを実装してサムネイル画像を並べるようにしました(スマートフォン時にスワイプ可能)。

カラーミーキットにはなかった、名入れを表示するようにしています。

商品説明は長文を入れられる下段に配置しています。

無料テンプレートデモページ

配布テンプレートの導入手順

導入手順について簡単に説明します。

1. ファイルをダウンロード

ダウンロード前に「使用許諾に関する注意事項」をご一読ください。


■使用許諾に関する注意事項■
ご自身のネットショップに導入する場合は、ダウンロード・使用はご自由にどうぞ(無料)
ご自身のネットショップに導入する以外の目的でダウンロード・使用することはお断りします。

注意事項に了承いただいた上で、下記リンクからダウンロードしてください。
naeco_template_v100.zip (45 ダウンロード)

2. 「カラーミーキット(2カラム)」を追加

カラーミーショップの管理画面から、テンプレート「カラーミーキット(2カラム)」を追加します。

3. テンプレートを更新

追加したテンプレートのHTML・CSS編集を開いて、解凍したファイルの内容を上書きでコピペします。上書きが都合悪い場合は、あらかじめバックアップを取っておきます。

解凍した7ファイルのコピペ先は以下のとおりです。対応する場所にコピペして保存してください。

1-kyotsu-HTML.txt → 共通HTML
2-kyotsu-CSS.txt → 共通CSS
3-top-HTML.txt → トップHTML
4-shohin-ichiran-HTML.txt → 商品一覧HTML
5-shohin-shosai-HTML.txt → 商品詳細HTML
6-shohin-shosai-CSS.txt → 商品詳細CSS
7-shohin-kensaku-HTML.txt → 商品検索結果HTML

4. レスポンシブに切り替え

スマートフォンでの表示状態 【PCテンプレート】 が設定されているか確認します。
【PCテンプレート】になっていない場合は、「変更する」で切り替えます。

5. 動作確認

正常動作するか、一通り確認してから使ってください。

配布テンプレートの使用上の注意

対応ブラウザは最新バージョン。
Internet Explorer 11でも動作確認を行っています。

無償サポートは行っておりません(個別の要望があれば有償で行います)。
この件に関するお問い合わせについては、個別には返信しません。
何かしら対応した場合はこのページで報告します。

表示崩れは適宜修正する予定です(ダウンロードファイルを更新します)。
中をいじってる方は上書き時に自分で追加修正した箇所が消えてしまいますので、ご注意ください(あらかじめメモしておいてください)。

カスタマイズ情報

中のコードとclass名はベースとなったカラーミーキット由来です。
paddingやmarginのclassが多くて読みにくいですが、ちょこっと調整するには便利です。
参考)カラーミーキット - ネットショップ作成サービス カラーミーショップ

テンプレートプラスには対応していません。

右サイドバーにしたい場合
#contents{float:right;} → #contents{float:left;}

文字を変更したい場合

テンプレート内で文字検索すると修正箇所がみつかります(例:カテゴリーから探す、など)。

アイコン消したい場合
たとえば、ショップブログのエンピツアイコンはこの部分を削除
<i class="icon-lg-b icon-pencil va-30 mar_r_5"></i>

デベロッパーツールが使えるようになると、修正箇所が簡単にわかります。

bxSlider関連

商品詳細ページにbxSlider(jQueryプラグイン)を使用しています。
矢印画像は、差し替える画像を用意してCSSでスタイルを適用すれば変更できます。
スライドショーの挙動はパラメータで調整できます。bxSliderの使い方解説ページを検索して読んでください。

商品画像の横に筋が出ることがあります(ブラウザの端数計算の処理の違いで生じます)。気になるようでしたら、パラメータをフェード(mode:fade)にしてください。

配布テンプレートの更新情報

2019/07/15 バージョン1.00 テスト版

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

ご相談・お問い合わせはこちら