カラーミーの新しいテンプレートを無料配布（おすすめ／自分で使う人用）
新しくテンプレートを作りましたので、カラーミーユーザー向けに、登録不要で無料配布します。
使用許諾については後述しますので、ご確認ください。
新テンプレートはオーソドックスな１カラムで、多くの人に選んでもらえるようにとんがったデザインは含まれていません（個別で付けてください）。その分選びやすいと思います。
ご自身のお店で使えるかどうか、実際にテンプレートを導入して動作確認してください。
naeco.jpで配布するテンプレート（無料）
機能は、カラーミーショップ
公式のテンプレ―ト「DISCOVER（無料版）」を踏襲していますが、一部、テンプレートプラス（営業日カレンダー、インフォメーション登録、新着商品など）の機能などを省いています（後付けは可能です）。そのためフリープランで動作します。
主な特徴は、
- 変更しやすいように、テキストやサイズなどを一部変数に
- 人気検索キーワードの表示（手動で登録）
- フリーページでお気に入り商品一覧を表示
- スマホ時にプルダウンを使わず、オプション表を表示（オプション表形式を選択時。正しいオプション価格・在庫数を表示する目的）
トップページには、邪魔にならないくらいの動き（アニメーション）をつけてあります。
トップページのお知らせ・フリースペースはHTMLを使ってコーディングする必要があります（サンプルコードを付けています）。HTMLの知識があれば凝ったデザインにすることも可能です。
商品詳細ページには構造化データを入れています。
ブランドをグループ登録している場合などは、お店に合わせて書き換えを検討してください。
元々、DISCOVERにあった機能ですが、共通CSSの61-66行目に、サイズが異なる画像を切り抜いて、縦横サイズを揃えるCSSが入っています。オリジナルの画像サイズを使いたい場合はここの設定を変更してください。
例（共通CSS内）
--item-img-object-fit: contain;
--item-img-before-padding-top: 100%;
デモサイト https://naeco2.shop-pro.jp
テキストなどを変数に登録しています
ご自身で修正しやすいように、SmartyとCSSの変数を使っています。
共通・商品詳細テンプレートの最上部に記述してありますので、いじりたい方はどういうものが変数になっているのか、一度確認してください。
たとえば見出しのテキストを変更したい場合。
カラーミーショップの場合、テンプレート内の該当箇所を探して、コードを修正する必要がありました。
このテンプレートでは、value="～"のテキストを見て修正します。なんとなくの理解で作業できますし、簡単に変更できます（説明は書いてありませんので、適当に試してください）。
人気検索キーワードの表示
あらかじめ登録したキーワードを検索窓の下に表示します。
上記の変数を使って、手動で登録を行います。
フリーページでお気に入り商品一覧を表示
トップページに配置するとごちゃごちゃしがちな、お気に入り商品と最近チェックした商品を、一つにまとめてフリーページで表示します。
スマホ時にプルダウンを使わず、オプション表を表示
カラーミーショップの仕様では、オプション表形式を選択していても、スマホ時には常にプルダウンに置き換わります（表よりもコンパクトになりますので、理由は理解できますが）。
プルダウンはオプション価格やオプション在庫数がぱっとみ表示されず、お客様にストレスを与えます（カラーミーカスタマイズにおいてよく相談があります）。
オプション表形式を選択している場合は、スマホ時も表形式のままで表示することで、オプション価格なども表示されます。こちらのほうがお客様にとって使い勝手がよいのではないかと考えます（とはいえ、プルダウンに戻したい場合のために、コードは残してあります）。
表の幅が広いとスクロールバーが出ますので、操作が不便になるデメリットも発生します。
縦表示やオプションを減らすなど、商品登録の仕方も考えてみてはいかがでしょうか。
配布テンプレートの導入手順
カラーミーショップへの導入手順について簡単に説明します。
1. ファイルをダウンロード
ダウンロード前に「使用許諾に関する注意事項」をご一読ください。
■使用許諾に関する注意事項■
ご自身のネットショップに導入する場合は、ダウンロード・使用はご自由にどうぞ（無料）。
ご自身のネットショップに導入する以外の目的でダウンロード・使用することはお断りします。
注意事項に了承いただいた上で、下記リンクからダウンロードしてください。
2. 無料テンプレートから「DISCOVER」を追加
カラーミーショップの管理画面から「他のテンプレートを追加」を押して、無料テンプレートのタブから「DISCOVER」を追加します。
3. テンプレートを更新
追加したテンプレートのHTML・CSS編集を開いて、解凍したファイルの内容を上書きでコピペします。上書きが都合悪い場合は、あらかじめバックアップを取っておきます。
解凍したファイルのコピペ先は以下のとおりです。対応する場所（フリーページは任意）にコピペして保存してください。
1-kyotsu-HTML.txt → 共通HTML
2-kyotsu-CSS.txt → 共通CSS
3-top-HTML.txt → トップHTML
4-top-CSS.txt → トップCSS
5-shohin-ichiran-HTML.txt → 商品一覧HTML
6-shohin-ichiran-CSS.txt → 商品一覧CSS
7-shohin-shosai-HTML.txt → 商品詳細HTML
8-shohin-shosai-CSS.txt → 商品詳細CSS
9-tokutei-shotorihiki-HTML.txt → 特定商取引HTML
10-tokutei-shotorihiki-CSS.txt → 特定商取引CSS
11-shohin-kensaku-HTML.txt → 商品検索結果HTML
12-shohin-kensaku-CSS.txt → 商品検索結果CSS
13-privacy-policy-HTML.txt → プライバシーポリシーHTML
14-privacy-policy-CSS.txt → プライバシーポリシーCSS
15-freepage1.txt → フリーページ No. f1「お気に入り商品」
16-freepage2.txt → フリーページ No. f2「naeco demoについて」
17-freepage3.txt → フリーページ No. f3「はじめてのお客様へ（テキストページ）」
4. 管理画面内の設定
管理画面から、ショップ作成＞ショップ情報＞トップページと、デザイン＞スライドショーで設定します。
ダウンロードしたファイルに管理画面内のサンプルを添付しています。
設定内容のスクリーンショットも添付していますので、併せて参考にしてください。
5. レスポンシブに切り替え
スマートフォンでの表示状態 【PCテンプレート】 が設定されているか確認します。
【PCテンプレート】になっていない場合は、「PC版表示」に設定（リンク）を押して設定してください。
6. 動作確認
正常動作するか、一通り確認してから使ってください。
配布テンプレートの使用上の注意
Chrome、Safari、Firefox、Edgeで動作確認しています（古めのバージョンとIEは除く）。
無償サポートは行っておりません（個別の要望があれば有償で行います）。
ご質問などがある場合は、有償サポートをご利用ください。
また、この件に関するお問い合わせについては、個別には返信しません。
何かしら対応した場合はこのページで報告します。
表示崩れは適宜修正する予定です（ダウンロードファイルを更新します）。
中をいじってる方は上書き時に自分で追加修正した箇所が消えてしまいますので、ご注意ください（あらかじめメモしておいてください）。
コードエディタで比較しながら、修正箇所を確認しておくと完璧です。
ご使用に際して生じた損害について、当方は一切責任を負いません。
作業が苦手な方向けの有償サポート
カラーミーショップのテンプレート作業が苦手な方向けに、有償でサポートを行っております。
テンプレートの導入から、初回設定までを行います。
テンプレート費用（0円）＋ 初回設定費用（※）＝ 33,000円（税込）
初回設定には以下の作業が含まれます。
※naeco.jpで行う初回設定は
- トップページのお知らせ、フリースペースのHTMLコード設置（機能追加は含みません）
- 見出し行、リンク、バナーのテキスト変更・文字サイズ変更・色変更
- 商品画像の切り抜き・全体表示、角の丸めのあり・なし、商品名の文字サイズ変更
- セクションなどの余白の調整
- 使わない項目の削除、セクションの非表示・表示場所の変更
- その他、お店に合わせて必要だと判断したちょっとした調整（崩れが出ている場合の対応）
- テンプレートの使い方の説明、テンプレートの機能の説明（実作業は伴わない）
- カラーミー管理画面の設定の相談
上記以外は、作業の大小にかかわらず要相談になります。
作業に際して別途費用が発生する場合があります。
また、機能追加も同様に費用が発生します。
あらかじめご相談ください。
ご依頼の際は、使用する画像・テキストをご用意ください。
初回設定が終われば、使っていただける状態になります（通常二日くらいで納品します）。
その他ご要望や追加機能の相談があれば、お伝えください。
有料テンプレート（ボタン版）
この無料テンプレートをベースに、プルダウンをボタン入力に作り変えたテンプレートを販売中です。アパレル系などに有効かと思います。
設置が難しいため、テンプレート費用のみの販売は行っておりません。
一サイトにつき、一つご購入ください。
初回設定費用込みで 66,000円（税込）です。お問い合わせください。
テンプレート費用 ＋ 初回設定費用 ＝ 66,000円（税込）
有料テンプレートの紹介ページは、以下の記事を参考にどうぞ。
https://naeco.jp/product/colorme-template-05
ボタンのデモは、以下のページを参考にどうぞ。
デモページ
ボタンを使っている商品ページ1（操作感が確認いただけます）
おわりに
一通りテストしました。
変なところが見つかれば、不具合の重要度に応じて即対応、または手すきのときに対応します。
ご自身のサイトに入れて使う分には、がっつり中身をいじっていただいて大丈夫です。
無料配布は顧客サービスの一環です。本業の合間に作業しますので、いろいろと察していただけると幸いです。
このテンプレートをベースにしてサイトを作りたい場合は、naeco.jpにご相談ください。
（凝り具合にもよりますが）比較的安価にショップサイトが作られると思います。
カラーミーは、文書型宣言（DTD）が XHTML 1.0 Transitional なので、セマンティックなタグを使いません（文法的にはこれが正しいが、HTML5で書いてもふつうに動作します）。
配布テンプレートの更新情報
2025/03/06 バージョン1.05
preload、loading="lazy"周辺の修正。PSI対応の一環で、各自で画像の高さを指定すると、まずますのパフォーマンス値が出るようになります。
2024/10/22 バージョン1.04
3-top-HTML.txtの261行目あたりのstyleの閉じカッコ } 不足（これまで表示が崩れなかったので気づかず）。その他こまごまとした改善。
2024/03/31 バージョン1.03人柱版としては、最後になると思います。余白（パンくず下）。
2024/03/04 バージョン1.02
人柱版。詳細のスライド周り。余白（パンくず下、型番）、キーワードの並べ方。見え方の細々とした修正。フリーページ（No. f3）のサンプルコードを追加。
2024/02/22 バージョン1.01
人柱版。構造化データを修正（ショップの消費税設定によって、一部エラーになっていたため）。
2024/02/05 バージョン1.00
人柱版。時間のあるときにコードを読み直して中を整理します。
おまけ
カラーミーショップの２カラムの無料テンプレートは、以前の記事を参考にどうぞ。
執筆者
えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら