カラーミーキットの商品画像にslickとLightboxをつけてみる

スマートフォンでスワイプできる機能「slick」や画像拡大機能「Lightbox」を実装する相談がよくあります。カラーミーショップの無料テンプレート「カラーミーキット」を使って、コードを書く場所を解説します。

カラーミーで使っているスライドショー機能「slick」の使い方を解説します

おすすめのスライドショーは、カラーミーショップへの設置しやすさでは「slick」かなと思います。slickもオーソドックスなスライドショー機能は一通りそろっています。使っている人も多いので、検索すると探している情報が大体見つかります。

カラーミーショップのカレンダーは、独自タグを使います。カレンダーについての仕様を学びながら、かんたんなカスタマイズをしてみます。

ヘッダー上に、一行ニュースを表示するサイトを見かけます。ニュースを流す要望があったので、サンプルコードを書きました。

MONOテンプレートは、カラーミーショップでよく選ばれる人気のテンプレートです。カラーミーの食品系ショップを中心によく使われています。少しいじると上品で洗練されたサイトになりますので、ファッションブランド系でも使えます。MONOのカスタマイズについて記事にしました。

カラーミーショップには、お気に入り商品を登録する機能が実装されています。便利な機能なため、機能紹介と設置方法を解説します。

カラーミーショップの商品一覧で、価格降順（価格高い順）で並べて表示するサンプルコード（Smarty）を書きました。

通信環境の向上もあって、Webフォントは以前よりも使いやすくなっています。自サイトで使う場合について、ホスティングサービスのフォント（Google Fonts、Adobe Fonts）を利用する方法と、自分でアップロードして利用するフォントの二通りについて、まとめました。

繰り返し同じようなコードを記述し、かつ運用時にときどき更新が必要な場合に、作業効率がグンと上がるコーディングの工夫を紹介します。

サイトのメニューは一番個性が出るところで、使い勝手にかなり影響するため、いろいろと検討されると思います。カラーミーショップでは、MONOテンプレートのヘッダーメニューはペロっと出入りして、挙動がおもしろいです。MONOテンプレートをカスタマイズ時の参考になりますので解説します。