カラーミーショップをカスタマイズ!スライドショーを設定する方法とは?

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーでスライドショーを設定する方法について知りたい
という方のために、設定方法について解説をします。

この記事を読むことで、

  1. スライドショーの機能がわかる
  2. 設定方法がわかる
  3. 画像サイズが上手くいかな場合の対応がわかる
  4. モバイルに対応させるための方法がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではカラーミーでスライドショーを設定する方法について解説していきます。

 

カラーミーのスライドショー機能とは?

カラーミーのショップページには、スライドショーを設定できます。

カラーミーのスライドショーは、

Firefox・Chrome・Safari・iOS・Android・IE7+に対応しています。

スライドショー機能を使用することにより、

ショップのトップページに大きな画像を貼り付けられるため、購買意欲の向上を促せるでしょう。

どのような商品を取り扱っているショップなのか、知ってもらうためのきっかけにもなります。

カラーミーのスライドショー機能を設定する際の流れ

カラーミーのスライドショー機能を利用するためには、

あらかじめ設定をしておかなければいけません。

ここでは、スライドショーをショップで使用するための設定手順について解説していきます。

スライドショー設定画面を開く

まずは、管理画面にある「ショップ作成」から「デザイン」に進んでクリックします。

続いて、左側のメニュー内にある「スライドショー」をクリックしてください。

すると、スライドショー機能に関する設定画面が開きます。

スライドショーに使う画像をアップロードする

スライドショー機能に関する設定画面を開くことができたら、

スライドショーに使う画像をアップロードします。

アップロードの手順は以下の通りとなっているため、

その手順に沿って作業を進めてみてください。

「ここにファイルをドラッグ」に画像を移動

まずは、スライドショーで使用したい画像を

「ここにファイルをドラッグ」と書かれたグレーの場所に、ドラッグアンドドロップします。

1回で複数の画像を登録できるため、

まとめてドラッグアンドドロップすると作業時間を短縮できるので試してみてください。

この方法で画像の登録ができない場合は、

「ファイルを追加」から画像を登録できます。

「ファイルを追加」から登録する場合は、

最大10枚までで1ファイルあたりのサイズは2MBが上限です。

登録した画像に関しては、サイズが大きい画像に合わせて左寄せで表示されます。

推奨サイズは記載がありませんが、縦横比を合わせると余白が生まれないのでおすすめです。

画像が追加されたらリンクURLを入力する

スライドショーに使用する画像が追加したら、リンクURLを入力してください。

リンクURLを入力することにより、画像にリンクが貼れます。

セールページやブログなどの誘導、バナー表示にも活用できるのでとても便利です。

スライドショーに字幕を付けたい場合は、

リンクURLの下にある字幕部分に挿入したい文言を追加してください。

そうすることで、字幕付きのスライドショーが完成します。

また、追加した画像を削除することもできます。

その場合は、「×」ボタンをクリックするだけです。

表示時間とスライドの方法を設定

表示時間とスライドの方法も細かく設定することができます。

初期設定では、停止時間が2秒、スライド時の速さが1秒となっています。

表示時間は、スライドの停止時間と速さを設定することで調整可能です。

数字が小さくなればなるほど、スライドを表示するスピードが速くなります。

表示時間を変更したい場合は、半角数字を入力し、

エンターキーを押すだけなのでとても簡単です。

スライドの方法は、横スライドとフェードの2種類から選べるようになっています。

イメージに近い方を選んでみてください。

字幕表示を「あり」にすると、画像をアップロードした時に登録した文言が表示されます。

不要な場合は、「なし」を選択してください。

表示サンプルで設定した動きをチェックし、問題がなければ完了です。

出力用タグをショップのテンプレートに設定

スライドショーを設定すると、出力タグが生成されます。

そのタグをショップテンプレートに設定してください。

管理画面にある「ショップ作成」から、「デザイン」のページを開きましょう。

そして、コピーした出力用HTMLタグを、

デザイン設定の中にある「トップ」という項目に貼り付けます。

「トップ」の中にある「編集するテンプレートを選択」をクリックし、

「2トップ」から「HTML/CSS編集」をクリックしてください。

クリックするとテンプレートの編集画面が開くため、

任意の場所に先ほどコピーした「出力用HTMLタグ」を貼り付けます。

最後に、「保存」を押すと設定が完了です。

保存したら、きちんと反映しているか確認するために、

「プレビュー」もしくは右上にある「ショップを表示」を押して、

最終確認を忘れずにしてください。

画像サイズが上手くいかない場合は?

スライドショーに使用する画像サイズが、思っていたようにはならない場合もあります。

その理由は、スライドショーではアップロードした画像のオリジナルサイズが

適用になるからです。

画像のサイズを変更したい場合は、画像編集ソフトなどを使って

元画像のサイズを変更しなければいけません。

カラーミーでは推奨サイズなどは指定していませんが、

表示サンプルの画像は600px:180pxが目安となっています。

この目安を基に、画像サイズの調整をしましょう。

ただし、表示する枠組みのサイズを指定したり、センター寄せにしたりすることはできません。

また、2つのスライドショーを掲載することもできないため、理解しておく必要があります。

カラーミーのスライドショーをモバイルに対応させるためには

カラーミーでは、スマートフォン向けのショップでも

スライドショーを表示できるようになっています。

ただし、テンプレートの中には最初からスライドショーを表示するためのタグが入っていて、

「スライドショー」のページで設定したとしても表示できない場合があります。

スマートフォンで、そのような状況になっている場合は以下の方法を試してみてください。

「スマートフォンデザイン設定 」のページ内にある、「デザイン設定」をクリック。

そして、「2トップ」の「HTML CSS編集」をクリックし、

HTML編集エリア内に任意の場所にタグを挿入します。

設定をしたら反映しているか確認するために、

ページの右上にある「プレビュー」をクリックします。

正しく表示しているか、チェックしてみてください。

問題なく表示していたら、「更新」をクリックすると完了です。

カラーミーのスライドショーを導入し、より見やすいショップに

カラーミーのスライドショー機能を使うと、ショップがより見やすくなります。

取り扱っている商品についても知ってもらいやすくなるため、購買行動につながりやすくなるでしょう。
そのため、スライドショー機能の導入はメリットが大きいと言えます。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。