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

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

レスポンシブ対応の無料テンプレート「カラーミーキット」を作り込む（配布あり）

カラーミーショップの無料テンプレートは、レスポンシブ対応していないことも多く、必要な機能もたりていないことが多いです。今回はカラーミーキットをベースに、わりとおしゃれな無料テンプレートを制作しました。登録不要で無料配布しています。

カラーミーのテンプレートの選び方について、お客さまの使いやすさを念頭においたテンプレート選びを紹介しています。取扱商品に応じたテンプレートのデザイン向き・不向きや必要機能などを既存テンプレートごとに紹介しています。

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

「ブログの最新記事を取ってきて、カラーミーショップ上で表示したい」というご依頼がよくあります。naeco.jpでは、非同期通信（Ajax）を利用することでページ描画時にロックしない方法をご提案しています。SEOも問題なくおすすめです。

カラーミーショップにブログ記事を埋め込む方法として、RSSフィードを利用する方法があります。RSSフィードから記事情報を取得するサンプルコードを書きました。YQLの無料サービス廃止に伴って書き直したJSONPを使う最新版です。

カラーミーショップ公式「WordPressプラグイン」のマニュアルに載っていない所を解説記事にしました。ショートコードと商品情報の埋め込み方、テンプレートや商品一覧ページの作成、OGP設定など。メディアECに検討している方はチェック！

WordPressプラグインを使って、カラーミーショップの商品情報を埋め込むテンプレート（PHP）の作り方を紹介します。あらかじめ用意しておくと、投稿記事の好きな場所にさくっと埋め込めます。サンプルコードを交えて解説しています。

どこでもカラーミーは「在庫管理する」で「在庫数0」の場合にカートボタンが非表示になります。案外これが不便で、SOLD OUT表示したいことあります。カラーミーショップ公式WordPressプラグインを使って改善する方法を紹介します。

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