カラーミーショップに画像スライダーを設置する方法

Pocket

カラーミーショップの無料テンプレートをカスタマイズしてスライドショーを入れてみます。

カラーミーショップに用意されているコンテンツにスライドショーがあります。スライドショーは新着商品のバナーやセールバナーなどを簡単にスライドショーで表示することができる便利な機能。

このページではスライドショーの設定方法と合わせて、無料テンプレートに設置する方法を紹介します。

カラーミーショップのスライドショーの使い方

まずはどれか1つ無料テンプレート選んで有効化しましょう。ここではレスポンシブレイアウトになってるカラーミーキットを使ってスライダーを入れてみます。
カラーミーキットにスライダーを入れる

管理画面でスライダー設定を行う

スライダーを使うには管理画面のスライド設定を行います。設定を行うには管理画面メニューのデザインからスライドショーを選択して、設定画面を開きます。
カラーミーショップスライドショー画面

まずは画像のアップロードを行います。ファイルを追加ボタンから画像をアップロードし、アップロードボタンを押します。
スライドショーに画像をアップロード

次はスライドの設定。停止時間やスライドの早さなどを設定します。設定は自動的に適用されるのでボタンを押して更新などは必要ありません。
スライドショーの設定

テンプレートにスライドショーのタグを貼付け

スライドショーの設定ができたら出力用HTMLタグにあるコードをコピーし、テンプレートに貼付けます。ここではカラーミーキットの共通テンプレートにあるヘッダー下にコードを追加しました。
スライドショータグの追加

プレビューを表示してみると、綺麗に表示されているのがわかります。
スライドショーの表示

まとめ

とくにコードをいじらなくても、貼付けだけで簡単にスライドショーを設置することができました。画像は10枚までアップロードでき、スライドショーの設定も管理画面から行うことが可能です。

こちらのサイトではカラーミーショップのテンプレートを販売中!カラーミーキットをフル活用したレスポンシブレイアウトになっており、インストール方法もテンプレートコードの貼付けのみ。気になる方は是非チェックしてみてください
TetraThemes カラーミーショップテンプレート販売中!