トップページスライド（slick.js）のカスタマイズ

カラーミーSEO+テンプレートではトップページのスライドと商品ページ（商品画像）にslick.jsを使用しています。

スライドの設定にはhtmlの編集が少し必要となりますが、単なる画像のスライドだけでなくテキストやリンクを組み合わせた複雑なスライドも簡単に作れるので、ぜひ活用していただきたいところです。

カスタマイズ方法をいくつか掲載しておきます。基本的にカラーミーSEO+テンプレート用の内容ですが、同じくslick.jsを使用しているテンプレートなどでも当てはまるところは多いはずです。

スライドを表示させる方法(html)

SEO+でのスライド表示は、「1-common.html (共通)」のhtml編集が必要となります。

まず初期状態では非表示になっているので「style=”display: none;”」を削除。

「ここにスライド内容」と書かれた部分にスライドしたい内容を差し込みます。前後のdivタグには一切触らないように気をつけてください。

slick.jsが、このdivタグにクラス属性を追加してスライド領域を決めるので、このdivタグに直接margin やpositionを付けてしまうと表示が崩れます。

margin padding positionなどを使いたいときは、「ここにスライド内容」の部分に新しくdivタグを作ってレイアウトを整えてください。

（例）
<!-- トップページはスライドを表示 -->
<div class="top_slide">
 <div>
  <div class="your_class">
   <p>hogehoge</p>
  </div>
 </div>
 <div>
  <div class="your_class">
   <img src="xxx.jpg" alt="xxx" />
  </div>
 </div>
</div><!-- // .top_slide -->

スライドの動きに関するカスタマイズ（js）

スライドの切り替え方や表示スピードについては「2-top.html (トップページ)」の末尾に編集箇所があります。
↓

<script type="text/javascript">
$(document).ready(function(){
$('.top_slide').slick({
// slickのオプションを設定
autoplay:true,
autoplaySpeed:3000,
fade:true,
dots:true,
pauseOnHover:false,
swipeToSlide:true,
});
});
</script>

autoplay	自動再生するかどうか true/false
autoplaySpeed	再生スピード（1000分の1秒単位で指定）
fade	フェード効果 true/false
dots	スライド下にドット表示するかどうか true/false
pauseOnHover	オンマウスでスライドを一時停止 true/false
swipeToSlide	タッチスワイプを許可　true/false

よく使うのは上記あたりだと思いますが、もっと細かく指定したい場合は、slick.jsのgithubを参考にしてください。

スライドデザインのカスタマイズ(css)

下記を参考にcss編集し、「トップページ」のcss部分（初期状態では何もない）にコピー＆ペーストで貼り付けてください。
「共通」に貼り付けた場合、商品ページのスライド（スマホアクセスの場合作動）にも同じ設定が適用されます。

ドット部分のデザイン編集

位置を変える
main .slick-dots {
	bottom: スライド底部からの距離をpxなどで指定;
}
ドット同士の間の距離を変える
main .slick-dots li {
	width: px指定　数字が大きいほど離れる;
}
ドットのサイズと色を大きくする
main .slick-dots li button:before {
	font-size: 任意のサイズ ;
	color: 色(通常時) ;
	opacity: 透明度;
}

アクティブなスライドのドット色
main .slick-dots li.slick-active button:before {
	opacity: 透明度;
	color: 色;
}

矢印部分のデザイン編集

スライド左右に表示される矢印のデザイン編集です。

矢印の位置を変える
初期値は「-10px」です。数字がゼロ、正の数になるほどスライド中央に寄っていきます。
main .slick-next {
　right: -10px;
}
main .slick-prev {
　left: -10px;
}
矢印のサイズと色を大きくする
main .slick-prev::before,
main .slick-next::before {
	font-size: 任意のサイズ;
	color: 任意の色;
}