カラーミーショップにスライドショーを配置

カラーミー大賞2018の受賞ショップ研究

ネットショップで売れているお店はどういうレイアウトで、どのような見せ方をしているのか調べてみようと「カラーミー大賞2018」の授賞ショップを見てみました。

もちろん細かい部分に違いはありますが大体共通しているのは、

１・トップページに横幅いっぱいのスライドショーで目玉となる商品やサービスの紹介、

２・スライドショーの下は２カラムになっていて商品リストなどのサイドバーは左に配置が多い

といったところです。

カラーミーショップ(PRリンク)に限らず最近の主流レイアウトだなと感じます。

売れるショップ作りは売れているお店の真似から。

まずはカラーミーだけで同じレイアウトを構成してみようと思います。

カラーミーショプで使うスライドショーを作成する
スライドショーを表示させる
1. HTMLの編集
2. スライドオプションの編集

カラーミーショプで使うスライドショーを作成する

有料のテンプレートを利用する手もありますが、スライドの配置ぐらいなら無料テンプレートでも簡単です。

今回はカラーミーキット（無料）テンプレートを前提で説明しますが、他のテンプレートでも大体同じです。

管理画面 : デザイン >>　スライドショー

スクリーンショット：カラーミーショップのスライドショーを設定 — カラーミーショップのスライドショー設定画面

「ファイル選択」でスライドに使いたい画像を保存。
「画像単位設定」でリンクURL、文字入れ（どちらも任意）を個別登録、保存。

スライドの種類、スピードなどの設定を済ませると下側に出力用HTMLが表示されていますので、これをコピーしておき次にすすみます。ちなみにbxslider.js用のコードが生成されています。

//生成されるコードの一例です
<{if $slideshow_html}>
  <div class="slider">
    <{$slideshow_html}>
  </div>
  <script type="text/javascript">
  //<![CDATA[
  $(function(){
    $('#slider').bxSlider({
      auto: true,
      pause: 3000,
      speed: 1000,
      controls: false,
      captions: true,
      mode: 'fade'
    });
  });
  //]]>
  </script>
<{/if}>

スライドショーを表示させる

管理画面 >> デザイン >> デザイン >> テンプレート編集

スライドショーはトップページだけに表示させることがほとんどだと思いますので、その体でいきます。
HTMLの操作なので当然ながら上級者モード（HTML・CSS編集）です。

先ほどコピーしておいたhtmlコードを貼り付けるだけですのでそんな難しいものではありません。

余白や画面幅など細かい調整をしたければcssの知識が必要になりますが、とりあえず今回はコピー＆ペースト + 補足だけでいける内容で書きます。

トップページだけにスライドを表示したいのですが、「トップ」のHTMLにコードを貼り付けるとサイドバーの幅だけ余白ができてしまい、横幅いっぱいにはなりません（下図）。

なので「共通」HTMLにはりつける方法をとります。
先に完成図がこちらです。きちんと横幅いっぱいになっています。

HTMLの編集

下図を参考に、先ほどコピーしたコードを「共通」のHTMLに貼り付けます。別にこの場所でなくても構いませんが、上の完成図に合わせています。

各ページのコンテンツを表示する部分（include file = $file_name）よりも上になるので、一見すべてのページで表示されてしまいそうですが、先ほどコピーしたコードを変にいじらずそのまま貼り付けていればトップページ以外では表示されないので心配ありません。

HTMLの編集はこれで終わりですので「保存」。

スライドオプションの編集

スライド作成で生成されたコードの中で基本的なオプションは設定されていますが、必要であれば追加オプションを設定することもできます。

まず自動で設定されているオプションは以下の意味です。

Option名	意味
auto	自動再生するか
pause	スライド停止時間
speed	スライドの変化時間
controls	スライド下のドットナビゲーション
captions	「字幕」を表示するかどうか
mode	フェードか横スライドか縦スライド

bxsliderのオプション設定

これだけでも問題ないですが、追加するなら以下あたり。

Option	意味
autoControls	下図のようなコントローラー表示(true/false)
autoHover	マウスホバーで一時停止（true/false）
pager	スライドに矢印アイコンを表示（true/false）

bxsliderでよく使うオプション設定

スクリーンショット：カラーミーショップのスライド表示 — スライドの実装サンプル

先程のコードにこれらオプションを追加する場合、以下のようなコードになります。

//コード例
<{if $slideshow_html}>
  <div class="slider">
    <{$slideshow_html}>
  </div>

  <script type="text/javascript">
  //<![CDATA[
  $(function(){
    $('#slider').bxSlider({
      auto: true,
      pause: 3000,
      speed: 1000,
      controls: false,
      captions: true,
      mode: 'fade',
      autoControls: true,
      autoHover: true,
      pager: true
    });
  });
  //]]>
  </script>
<{/if}>