ネットショップ運営担当者のブログ

楽天GOLDでスライドショーの作り方!レスポンシブ[テンプレート]

  • 2021年2月2日
  • 2021年6月4日
  • 楽天GOLD
  • 2126view
  • 0件

こんにちは!楽しいECです
10年以上、ネット販売に携わる仕事をしています

楽天市場の店舗をよく見てると
どの店舗もスライドショーを使用していることが分かります

新米店長
でもスライドショーって
どうやって作るんですか??
EC博士
確かにHTMLなど
詳しくない人にとっては難しそうですね、、

この記事では
楽天GOLDを使ったスライドショーの作り方
を解説いたします

前提として楽天GOLDを申し込み完了してから、お読みください

楽天ショップページには欠かせないスライドショー

まず、スライドショーって何?というところからですが、

こういった自動的に数枚のバナー(画像)が入れ替わる(スライドする)もののことです
スライドバナーとかスライダーとも言います

特に楽天のお店ではショップのトップページによく使われております
大体ヘッダーの下当たりが多いですね!
大きくドンと開催中のイベントや売り出したい商品のバナーがよく載るっています
動くので目に止まりますね

スライダーの種類も多いです。
一枚だけバナーが見えてて入れかわるものだったり、
4枚見えてるものだったり、
3枚見えてるけど、両端の画像が小さくなっているものなど多種多様です

ここでは上記画像のような、
3枚バナーが見えており、両端のバナーはチラッと見えてる
スライドショーの作り方を解説します

Slickを使ったスライドショーの作り方!

それでは早速初心者でも作りやすいスライドショーの作り方を解説します
slickはjQueryベースの、スライダーを作成するためのテンプレート(プラグイン)です

*ちなみに当サイトで販売している楽天GOLDテンプレートはslickは使用しておりません

1.まずは準備!slickのダウンロードなど

まずはバナーを用意します
何枚でも結構ですがなるべく同じサイズ(縦横比)がいいですね

次にslickをダウンロードしましょう!
こちらのskickの公式ページからダウンロードできます
(ページの下の方、download nowと書かれてるところからです)
ダウンロード出来たら解凍しておきましょう
解凍した後のフォルダからslickというフォルダを使います

FTPなどを使って楽天GOLDに接続してアップロードします
アップする場所はどこでもいいですが、一番上の階層(index.htmlなど置く階層)にアップすることにします
slickというフォルダをそのままアップします

2.htmlファイルに記述します

htmlファイルにをエディタなどで開き、
スライドショーを挿入したい箇所に下記のタグを記述します

今回は先ほど述べた通り、上記画像のような、
3枚バナーが見えており、両端のバナーはチラッと見えてる
スライドショーの作り方を解説します

<!--slick-->
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>
<ul class="slider mypattern">
 <li><a href="#"><img src="***.jpg"></a></li>
 <li><a href="#"><img src="***.jpg"></a></li>
 <li><a href="#"><img src="***.jpg"></a></li>
 <li><a href="#"><img src="***.jpg"></a></li>
</ul>
<script type="text/javascript">
$('.slider').slick({
autoplay: true,
dots: true,
centerMode: true,
centerPadding: '10%',
focusOnSelect:true,
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
.slider_width {
margin: 0 auto;
max-width: 1000px;
}
.slider {
width: 100%;
margin: 0 auto 80px;
}
.slick-slide img {
width: 100%;
height: auto;
}
.mypattern{
width: 100%;
}
.mypattern .slick-slide{
margin: 15px;
}
</style>
<!--slickここまで-->

ちょっと長いですがこれだけ入れれば表示されます
入れたら保存する前に書き換える箇所があります


<link rel=”stylesheet” type=”text/css” href=”slick/slick.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”slick/slick-theme.css” media=”screen” />
<script src=”slick/slick.min.js”></script>

slick/slick.css としてますが、slickのフォルダを一番浅い階層にアップした場合です。
違う場所に入れた場合、アップしたアドレスを入れてください
上記3か所あります


<a href=”#”><img src=”***.jpg”>
の箇所ですが入れたいバナーの画像URLとリンクURLを入れます
バナーの入れる枚数で増減させてください

おそらくこれで形にはなっていると思います

3.最後に調整、カスタマイズする

あとはお好みに調整してみてください

バナーの縦横比にもよりますが、画像が大きすぎたりしたら
スライダー自体の横幅を小さくしたり
(スライダー自体をdivで囲んでstyleを付ける)
バナーとバナーの間を調整します
(.mypattern .slick-slide{ margin:のところ)

今回は両端のバナーがチラ見えするデザインにしてますが
見えてる画像を一枚にするなど
slickのスライドショーテンプレートは色々なことができますので
やりたいデザインがありましたら色々変えてみてください
ネットで調べると色々で出てきます

<script type=”text/javascript”>
$(‘.slider’).slick({

↑ここの箇所を変えるだけで色々変わりますので
やってみてくださいね

今回は楽天GOLDにスライドショーを設置させる方法
というテーマで書かせていただきました!
何かの参考になれば、幸いです

楽天GOLDのテンプレート販売しています

当サイトでは楽天GOLDのテンプレートを販売しています
スライドショーもslickはついておりますがslickは使用しておりません
よろしければこちらもご覧ください↓

楽天GOLDのレスポンシブテンプレートの詳細ページ