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

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

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

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

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

2・スライドショーの下は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に貼り付けます。別にこの場所でなくても構いませんが、上の完成図に合わせています。

スクリーンショット: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}>
タイトルとURLをコピーしました