カラーミーキットの中を見て、レスポンシブ対応について学ぶ

Googleが発表したモバイルファーストインデックス（MFI）の方針もあり、サイトのレスポンシブ対応がますます重要な流れです。今回はレスポンシブ対応とはなにか、カラーミーキットの中をみながら学びます。

画像の拡大表示ができるCloud Zoomをスマホ対応する

カラーミー（Organicテンプレート）で使っているCloud Zoomを借りて、画像の拡大表示をしてみました。古いプラグインなので、スマホ対応（タッチパネル、レスポンシブ）できるように、コードを書いてみました。

カラーミーショップのカスタマイズをしていて、なかなか解決できない問題に遭遇することがあります。こういう「はまる」系の知識は一人でショップサイトを作っていると誰も教えてくれませんし、調べ方もよくわからなかったりします。ヒントをまとめました。

デベロッパーツールは Google Chrome に標準搭載されているウェブ制作の必須ツールです。ウェブ制作を仕事にしていない方はツールの存在を知らないことも案外多いので、デベロッパーツールの使い方について記事を書きました。

最近のネット利用率はスマホのほうが多いんだそうで、ネットショップもスマホ対応を考えていく必要があります。今回は商品詳細ページでスワイプ（画像送り）、ピンチアウト・ピンチイン（画像の拡大縮小）を付ける方法について紹介します。

カラーミーショップでは古めの無料テンプレートでレスポンシブ未対応なものがあります。人気の無料テンプレート Organic（オーガニック）をレスポンシブ対応するための修正箇所を記事しました。スマホ対応の参考にどうぞ。

2019年で6回目のカラーミーショップ大賞。ノミネートショップを全チェックして、流行りや気付いた点などを抜き出しました。昨年から入れ替わりも多くて、チェックしどころも多かったです。今後のサイト制作の参考にしてください。

ご自身で有料テンプレートを入れてカスタマイズしたり、ご自身でショップ制作される方向けの内容になっています（難易度すこし高め）。カラーミーショップで実際にあるデザインや機能から参考になる知識をまとめました。

カラーミーショップ・オーナー様で、HTML・CSSを独学で学ばれる方も多いと思います。入門書で基礎をインプットしても戸惑うこともしばしば。カスタマイズで混乱しがちなポイントにしぼって、すぐ使う知識をまとめました。

カラーミーショップで一番人気のテンプレートはMODE（有料）です。今回はMODEテンプレートでよくご依頼のあるカスタマイズについて紹介します。横幅、スライダー、サイドバー、商品の横並び数を変える、など。ちょっと難易度高め。