Shopifyのブログ見出しにアイコンをつけよう【DAWN】
にゃん花子
にゃんと役立つ!Wordpress手引き書サイト
SlickをShopifyで使うにゃん!
今回はDawnで、Slickを使用しました。Slickの本家サイトにのっている方法では、Shopifyでは動かなかったので、設定方法をご紹介します。
theme.liquidファイルの</head>直前に、Jqueryを読み込みます。
(SlickはJqueryに依存しているため必須です)
1<!--jqueryを追加 -->
2 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
theme.liquidファイルの</body>直前に、cdnとご自身で用意したcssとjsファイルも読み込みます。
1 <!--slick-->
2 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
3 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
4 {{ 'slider-slick.css' | asset_url | stylesheet_tag }}
5 <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
6 {{ 'slider-slick.js' | asset_url | script_tag }}
{{ 'slider-slick.css' | asset_url | stylesheet_tag }}と {{ 'slider-slick.js' | asset_url | script_tag }}は任意のファイル名に変更してくださいね。
今回作成したhtml、css、jsをご紹介しておきます。参考になればうれしいです。
1/*==================================================
2スライダーのためのcss
3===================================*/
4 .slider-show {
5 width:100%;
6 margin:0 auto;
7 text-align:center;
8}
9.slider-show li{
10 /* スライド画像同士の余白 */
11 margin:0 15px;
12}
13.slider-show img {
14 width:100%;
15 /* 画像の高さを自動調整
16 height: 380px;*/
17 /*画像サイズそのままサイズ表示*/
18 height:auto;
19 object-fit: cover;
20 object-position: 50% 50%;
21}
22
1 $('.slider-show').slick({
2 autoplaySpeed:2000,
3 speed:3000,
4 autoplay:true,
5 lazyLoad: 'ondemand',
6 slidesToShow:2,
7 slideToscroll:1,
8 arrows:false,
9 dots:true,
10 centerMode: true, //要素を中央寄せ
11 centerPadding: '10%',//左右の画像が見える幅
12 responsive: [
13 {
14 breakpoint: 769,//モニターの横幅が769px以下の見せ方
15 settings: {
16 slidesToShow: 1,//スライドを画面に2枚見せる
17 },
18 },
19 {
20 breakpoint: 426,//モニターの横幅が426px以下の見せ方
21 settings: {
22 slidesToShow: 1,//スライドを画面に1.5枚見せる
23 },
24 },
25 ],
26});
slick事態はオプションがいくつかあり、様々なスタイルで使用可能です。こちらのページでオプションを紹介していますので、ご参考にしてください。
liquidの記載のため、変数はそのままになっています。9行目〜32行目がスライドショーの範囲になります。
<li><img src=”画像のURL”></li>を繰り返し、スライド画像を表示します。
※blockを複数作り、case文で出し分けていますが、今回は長くなるので、block1の場合のみを掲載しています。
1<div class="page-width" style="margin-bottom:2%">
2 <div class="lp-container">
3
4 <!--タイトル-->
5 <h3 class="index-main-section__title">{{ section.settings.s-heading }}</h3>
6 <!--概要-->
7 <p style=" font-size: 1.4rem; margin-bottom: 6%;">{{ section.settings.s-text }}</p>
8
9 <!--スライドショー箇所-->
10 <ul class="slider-show" style="padding:0;">
11 {% for block in section.blocks %}
12 {% case block.type %}
13 {% when 'block1' %}
14
15 <li style="list-style:none;">
16 <img src="{{ block.settings.block1-img | img_url: 'master' }}" alt="" />
17 <h4>{{ block.settings.block1-title }}</h4>
18 <h4 class="recommend-desc" style="text-align:left;">
19 {{ block.settings.block1-text }}
20 </h4>
21 <p style="font-size: .8em; border-bottom: 1px dotted #cccccc;">Recommended detergent</p>
22
23 <div class="container-product">
24 <div class="image-container" style="margin: 0 auto;">
25 <a href="{{ block.settings.block1-link1 }}"><img src="{{ block.settings.block1-imgp1 | img_url: 'master' }}" alt="" /></a>
26 </div>
27 </div>
28 </li>
29
30 {% endcase %}
31 {% endfor %}
32 </ul>
33
34 </div><!--//lp-container-->
35</div><!--//page-width-->
36