レスポンシブ対応!万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる

Pocket
LINEで送る

コーダーとして仕事を請けるようになってから、「工数1人日で1ページ、コーディングよろしく! あ、ここのカルーセルスライダー、デザイン通りにね!(地味に凝ったデザイン)」なんて気軽に依頼されても、「了解しました〜!」と笑顔で答えなければなりません。
でも大丈夫。「slick.js」さえ使いこなせれば。

そんなわけで、「slick.js」でカルーセルスライダーを実装&カスタマイズを色々トライしてみます。

目次

なぜ「slick.js」がいいのか

  • レスポンシブ対応
  • IEでも問題なく動く
  • カスタマイズ性が高い
  • 王道プラグインだけあって、質の高い解説ブログが山ほど見つかる←重要!

slick.jsをダウンロードする


公式サイトからダウンロードします。
色んなパターンのスライドが実装できまっせ〜なサンプルを上に流して流して、設置方法の説明も流して、settingの解説も流して流して、だいぶ下の方にダウンロードボタンがあります。
急ぎのときは、グロナビの「get it now」をクリックするとダウンロードボタンのところまでスクロール移動できます。

解凍後、slick.min.jsslick.cssslick-theme.cssajax-loader.giffontsフォルダをそれぞれ格納(UP)します。
fontsフォルダslick-theme.cssと同じ場所に格納します。

矢印ボタンのデザインをカスタマイズする場合はfontsフォルダは必要無いのですが、ここでは設置する前提で進めます。

header内にjQueryslick.min.jsslick.cssslick-theme.cssの読み込みを記述します。

メモ

WordPressの場合、
<link rel="stylesheet" href="<!--?php echo get_stylesheet_directory_uri(); ?-->/css/slick.css">
のように、関数<!--?php get_stylesheet_directory_uri(); ?-->を使用すると楽。

使用しているテーマ・子テーマのディレクトリURIを取得するので、実際は
<link rel="stylesheet" href="https://ponsyon.com/wp/wp-content/themes/understrap-child/css/slick.css" />
のようになる。(上記はただの例なので、このサイトではCSSはそこにアップされていません)

カルーセルスライダーを実装する

一番ベーシックなスライダー

つまり何のオプションもカスタマイズもしないプレーンな状態のslick.jsのスライダーを実装してみます。

ex01: 1枚表示のスライダー(画像配置)

まずはシンプルかつベーシックなカルーセルスライダーを設置してみます。
スライドさせたい要素をdivなどで囲んで、任意のclass名を親要素に付加します。この例ではsingle-itemとします。

画像をスライドさせたい場合は、imgタグを直に置かず、divfigureなどで囲んでください。
また、cssで.slick-slide img {width: 100%;}を設定しておいた方が後々楽です(スライド間に隙間を開けたい場合は都度調整します)。

<div class="single-item">
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
</div>

また、jQueryの記述もします。先ほど親要素に付けたclass名にslick.jsを反映させます。
(記述する場所はhead内でも閉じbodyタグ直前でも構わないようです)

  $(function() {
    $('.single-item').slick(); 
  });

デフォルトでは左右の矢印アイコンはcolor:#fff;が指定されています。白背景の場合、見えなくなってしまうので、ここでは.slick-prev:before, .slick-next:before {color: #000;}を当てています。

1枚表示のスライダー(画像配置)のデモ

ex02: 1枚表示のスライダー(div要素配置)

もちろんdiv要素をスライドさせることもできます。
上記のシンプルなスライダーを画像ではなくdiv要素にしてみましょう(親要素のclass名はそのままにしてます)。

<div class="single-item">
  <div class="card"><p>1</p></div>
  <div class="card"><p>2</p></div>
  <div class="card"><p>3</p></div>
</div>

cssでスライドさせるdiv要素にstyleを当てます。

.single-item .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
  background: #fff;
}
.single-item .card p {
  font-size: 2rem;
}
1枚表示のスライダー(div要素配置)のデモ

オプションを使ってカスタマイズする

先ほどの例そのままを本番で使う機会はほぼ無いと思われます。

「自動スライドにしたい」
「スライドの下にドットを付けたい」
「スライドの下にサムネイルを並べたい」
「左右のスライドもチラ見せして、スライドだと分かりやすくしたい」
「複数のスライドを表示させたい」
「左右の矢印を非表示にしたい」
「左右の矢印をオリジナルの画像に変更したい」
「画面幅によって表示させるスライドの数を変えたい」
「レスポンシブでもスライド間の間隔を統一したい」
……などなど、要望が浮かびますよね。

ここからはslick.jsに付いているオプションを使用してカスタマイズしていきます。

オプション一覧

全部をざっとまとめてみます。使用頻度の高いもの(が付いているもの)を使いこなせるようになればいいと思います。

オプション名 default 説明
accessibility TRUE tabキーで「次へ」「前へ」ボタン(矢印アイコン)をfocusしたときに、キーボードの左右ボタンで画像の切り替えを可能にするかどうか。
adaptiveHeight FALSE スライダーの高さを現在のスライドに合わせる。
スライドごとに高さが異なるときに使用する。
autoplay FALSE 自動再生するかどうか。
autoplaySpeed 3000 自動再生時、切り替えまでの表示時間。
arrows TRUE 左右に「次へ」「前へ」ボタン(矢印アイコン)を表示するかどうか。
asNavFor null ページ内の他のスライドとセットで動作させたい場合、class名を記載。
スライド下にサムネイル表示させたい場合に、このオプションを使用して大きなスライドと小さなスライドをセットで動かします。
appendArrows $(element) 「次へ」「前へ」ボタン(矢印アイコン)の配置する位置を変更する。
(Selector, htmlString, Array, Element, jQuery object)
appendDots $(element) ドット(ページ送り)の配置する位置を変更する。
(Selector, htmlString, Array, Element, jQuery object)
prevArrow <button type=”button” class=”slick-prev”>Previous 「前へ」ボタンのhtmlの記述を指定。
nextArrow <button type=”button” class=”slick-next”>Next 「次へ」ボタンのhtmlの記述を指定。
centerMode FALSE 表示中のスライドを中央揃えにするかどうか。
‘slidesToShow’オプション(表示するスライドの指定)を奇数にして使用します。
centerPadding ’50px’ センターモードの時、スライドのpaddingを指定する(pxか%で指定)。
cssEase ‘ease’ 切り替え時のアニメーション効果。ease, linear, ease-in, ease-out, ease-in-outから指定する。
customPaging n/a ドット(ページ送り)の変更(※cssで調整した方が簡単)。
dots FALSE スライド下のドット(ページ送り)を表示するかどうか。
dotsClass ‘slick-dots’ ドット(ページ送り)に付加するclass名。
draggable TRUE ドラッグができるかどうか。
fade FALSE スライド切り替え時のフェードイン処理をするかどうか。
focusOnSelect FALSE クリックした要素のfocusを有効にするかどうか。
easing ‘linear’ easingを指定。
edgeFriction 0.15 スライダーがループではない場合、一番端のスライダーを引っ張ったときのバウンド処理までの時間。
infinite TRUE スライドをループにするかどうか。最後のスライドの次は最初のスライドが表示される。
initialSlide 0 最初のスライダーの位置(デフォルト値が’0’なので1枚目からのスタートとなる)。
lazyLoad ‘ondemand’ 画像の読み込むタイミングの指定。‘ondemand’はスライドした時に画像読み込み、’progressive’はページ読み込みが完了後に画像読み込みが開始される。
この指定を使う場合、imgタグでの画像の指定をsrc=”(画像パス)”ではなく、data-lazy=”(画像パス)”と記述する。
mobileFirst FALSE ‘responsive’オプション設定時にmobileFirst’をtrueにすると、breakpointの一番幅が狭いものの設定を反映させる。
pauseOnFocus TRUE 自動再生時、スライドエリアにfocusで一時停止するかどうか。
pauseOnHover TRUE 自動再生時、スライドエリアにhoverで一時停止するかどうか。
pauseOnDotsHover FALSE 自動再生時、ドット(ページ送り)にhoverで一時停止するかどうか。
respondTo ‘window’ ‘responsive’オプション設定時に、blackpointの基準となる要素を指定する。’window’がブラウザ幅、’slider’がスライダーの幅、’min’の場合は’window’と’slider’のより小さい方。
responsive none breakpointを指定して、画面幅がbreakpoint以下の時のオプションを設定できる。
rows 1 1以上に設定するとグリッドモードで初期化される。’slidesPerRow’オプションで各行ごとのスライド数を指定することができる。
slide スライドさせる要素のクエリを指定する(特定のclassが付いた要素のみスライドさせるなど)。
slidesPerRow 1 ‘rowsオプション設定時、各行ごとのスライド数の指定。
slidesToShow 1 スライドのエリアに画像がいくつ表示されるかを指定。
slidesToScroll 1 一度のスライドで切り替わるスライダーの数。
speed 300 スライドが切り替わる際のスピード。
swipe TRUE タッチスワイプに対応するかどうか。
swipeToSlide TRUE ‘slidesToScroll’オプションで設定した数値に関わらず、スワイプでスライドできるようにするかどうか(3枚ずつスライドする設定でも、スワイプで一枚ずつスライドできるようにするなど)。
touchMove TRUE タッチ操作でスライドの移動を有効にするかどうか。
touchThreshold 5 スワイプでスライドを移動させるために必要な距離を指定。
(1/touchThreshold)*スライダ幅、という計算になる。初期値の’5’の場合、スワイプするためにスライド幅の1/5スワイプする必要がある。’2’にした場合はスライド幅の1/2スワイプする必要がある。
useCSS TRUE CSS transitionを有効にするかどうか。
useTransform TRUE CSS transformを有効にするかどうか。
variableWidth FALSE スライド幅の自動計算を有効にするかどうか。
本来はスライドの幅が異なる場合にスライド自体の幅を固定させる用途だが、レスポンシブ時にブラウザ幅&スライダー幅が可変してもスライド自体の幅を変えたくない場合にも使える。
vertical FALSE 縦方向スライドモード。
verticalSwiping FALSE 縦方向のスワイプを有効にするかどうか。
rtl FALSE スライドする方向を右から左に変更するかどうか。
waitForAnimate TRUE スライドアニメーション実行中にスライド移動のリクエストに応じるかどうか。
zIndex 1000 スライドのz-indexを設定できる。IE9以下で便利。

下記リンクは、slick.jsのドキュメントを日本語翻訳しているサイトで、各オプションをデモを交えて丁寧に詳細に解説されています。
上の表がいらないレベルなんですが、作ることで勉強になったのでいいんです……。

slickドキュメント翻訳 | slick - にほんご

カスタマイズ例

さて、オプション設定でのカスタマイズ例を列挙していきます。

ex03: スライダーを自動再生させる

今回は他のデモと分けるために親要素のclassに.autoplayを付加して進めます。

jQueryの記述にautoplay: true,を付け加えます。

  $(function() {
    $('.autoplay').slick({
      autoplay: true,
    }); 
  });
スライダーを自動再生させるデモ

これ以降の例は、自動再生の設定をしたもので進めます。

ex04: スクロール切り替えではなくフェード切り替えにする

今回は例で親要素のclass名を.fadeとします。
jQueryの記述にautoplay: true,を付け加えます。

  $(function() {
    $('.fade').slick({
      autoplay: true,
      fade: true,
    }); 
  });
フェード切り替えのデモ

ex05: 複数枚のスライドを同時に表示させる

今回は例で親要素のclass名を.multiple-itemsとします。
jQueryの記述にslidesToShow: 3,を付け加えます(数値は任意です。表示させたい数を入力してください)。

  $(function() {
    $('.multiple-items').slick({
      autoplay: true,
      slidesToShow: 3
    }); 
  });
複数枚のスライドを同時に表示させるデモ

ex06: スライドを数枚ずつスクロールさせる

複数表示させた場合など、一枚一枚スライドさせずに表示されている複数のスライドをまとめてスライドさせたい場合。

今回は例で親要素のclass名を.data-slickとします。
前述「ex05: 複数枚のスライドを同時に表示させる」を流用して以下付け加えます。jQueryの記述にslidesToShow: 3, slidesToScroll: 3,を付け加えます(数値は任意です。slidesToShowに表示させたい数、slidesToScrollに一度にスライドさせたい数を入力してください)。

  $(function() {
    $('.data-slick').slick({
      autoplay: true,
      slidesToShow: 3,
      slidesToScroll: 3,
    }); 
  });
スライドを数枚ずつスクロールさせるデモ

ex07: 流れるようにスムーズにスクロールさせる

これまではスライドごとにスクロールされていましたが、自然に流れててほしいときだってあります。

今回は例で親要素のclass名を.smoothとします。
前述「ex05: 複数枚のスライドを同時に表示させる」を流用して以下付け加えます。jQueryの記述にslidesToShow: 3, cssEase: 'linear',を付け加えます(数値は任意です。slidesToShowに表示させたい数、slidesToScrollに一度にスライドさせたい数を入力してください)。

  $(function() {
    $('.smooth').slick({
      autoplay: true,
      slidesToShow: 3,
      autoplaySpeed: 0,
      cssEase: 'linear',
      speed: 5000,
    }); 
  });
流れるようにスムーズにスクロールさせるデモ

ex08: 左右の「前へ」「次へ」ボタンを非表示にする

今回は例で親要素のclass名を.no-navとします。
jQueryの記述にarrows: false,を付け加えるだけです。

  $(function() {
    $('.no-nav').slick({
      arrows: false,
    }); 
  });
左右の「前へ」「次へ」ボタンを非表示にするデモ

ex09: スライダーの下にページ送りのドットを表示させる

今回は例で親要素のclass名を.dotsとします。
jQueryの記述にdots: true,を付け加えます(なぜかデフォルトではfalseで非表示なのです)。

  $(function() {
    $('.dots').slick({
      dots: true,
    }); 
  });
スライダーの下にページ送りのドットを表示させるデモ

ex10: スライド画像の読み込みタイミングを調整する

今回は例で親要素のclass名を.lazyとします。
jQueryの記述にlazyLoad: 'ondemand',、あるいはlazyLoad: 'progressive',を付け加えます。ondemandはスライドしたタイミングで画像を読み込みます。progressiveはページ読み込み完了後に画像を読み込みます。どちらも最初に表示されているスライドは普通にページ読み込みのタイミングで読み込まれます。
このオプションを使用する際は、画像のURL指定をsrc=""からdata-lazy=""にする必要があります。

<div class="lazy">
  <figure><img data-lazy="(画像のパス)" /></figure>
  <figure><img data-lazy="(画像のパス)" /></figure>
  <figure><img data-lazy="(画像のパス)" /></figure>
</div>

ここではimgタグをfigureタグで囲んでますが、もちろんdivタグで囲んでも構いません。

  $(function() {
    $('.lazy').slick({
      lazyLoad: 'ondemand',
    }); 
  });
スライド画像の読み込みタイミングを調整するデモ

ex11: 前後のスライドをちょい見せしたい

1枚だけバーンと、3枚ずつピシッとではなく、両脇に前後のスライドを覗かせたいときってありますよね。

今回は例で親要素のclassに.single-center-paddingを付加して進めます。

jQueryの記述にcenterPadding: '', centerMode: true,を付け加えます。centerPaddingの''の中には前後のスライドをどの程度見せたいか、幅の数値を入れます。
また、スライドさせる画像はwidth: 100%,等として親要素.slick-slideの幅に添うようにしておきます。こうすることで、単純な可変スライダーにもなります。

  $(function() {
    $('.center-padding').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 1,
    });
});
前後のスライドをちょい見せ

センター寄せじゃなくて左寄せにしときたいこともあるかもしれない。
そんな時はCSSでimgにmargin-leftcenterPadding: '60px',の分、マイナスに設定して調整かな。

後のスライドをちょい見せしつつ左寄せ

ex12: レスポンシブ(ブレイクポイントで表示を切り替える)

ブラウザ幅によってスライドの表示枚数を変えたい、dotを消したい、などの調整の仕方です。

今回は例で親要素のclassに.responsiveを付加して進めます。

jQueryの記述にresponsive: でブレイクポイントごとの記述を付け加えます。

  $(function() {
    $('.responsive').slick({
      dots: true,
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 5,
      responsive: [
        {
          breakpoint: 640,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }
      ]
    }); 
  });
レスポンシブのデモ

ex13: サムネイル付きスライダーにしたい(2つのスライダーを連動させる)

メインのスライダーは大きく見せて、小さいサムネイルのスライダーを下に複数表示させることで前後のスライダーも内容も見せておきたい。オンラインショップのサイトでよく見るパターンです。
オプションで対応するには、2つのスライダーを連動させることでサムネイル付きのような形にします。

今回は例で大きなスライダーの親要素のclassに.slider-for、小さなスライダーの親要素のclassに.slider-navを付加して進めます。

<div class="slider-for" style="margin-bottom: 10px;">
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
</div>
<div class="slider-nav">
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
  <figure><img src="(画像のパス)" /></figure>
</div>

jQueryの記述にasNavFor: '',''の中に連動させたいスライダーのclassをそれぞれ記述します。

  $(function() {
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });  
    $('.slider-nav').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      centerMode: true,
      focusOnSelect: true,
    }); 
});
2つのスライダーを連動させるデモ
サムネイル付きスライダー、他のアレンジ参考リンク

「2つのスライダーを連動させるとHTMLが煩雑になる」「更新時にややこしくしたくない」という場合は、ちょっと高度になりますがjQueryの方で記述を頑張ると良いです。
1つのスライダーで、dotの部分に画像を配置させる方法です。下記nxworldさんの記事を参考になさってください。
このやり方だと、サムネイル側のスライダーをスクロールさせたくない場合にも良いです。

こちらは、2つのスライダーを連動させるけど、サムネイル側のスライダーのスクロールをさせない技。jsの記述を追加してslick.jsのスクロールを止める。

こちらも、2つのスライダーを連動させるけど、サムネイル側のスライド機能を無くして、メインのスライダーとの連動だけさせる技。
infinite: false;を使用するので、素直なループはしないようですが。

ex14: スライドの幅を固定してブラウザ幅で切れて欲しい場合のレスポンシブ

breakpointで調整するんじゃなく、どのブラウザ幅でもスライドの大きさは変えずに、勝手に左右切れてほしい。そんな場合。

今回は例で親要素のclassに.responsive-slide-widthを付加して進めます。
cssでスライドの幅をwidth:300px;にします。

jQueryの記述にinfinite: true, centerMode: true, centerPadding: '0', variableWidth: true,の合わせ技で対応できました。
初期表示でスライドの左端が表示されていないなど微妙に不具合があるのですが、ページの下部に置いておく場合は、そこにたどり着くまえにスライドが進むので問題ないと思います。
が、研究します!

  $(function() {
    $('.responsive-slide-width').slick({
      autoplay: true,
      infinite: true,
      centerMode: true,
      centerPadding: '0',
      variableWidth: true,
      arrows: false,
      dots: true,
    });
  });
レスポンシブ(スライドの幅を固定する場合)のデモ

ex15: ドットのカスタマイズ(CSSで無理やり)

slick.jsオプションのdotsClassでドットにオリジナルのclass名を付加して編集するとスマートなのですが、付加しないで強引にCSSでデザイン上書きすることもできます。

ドットのカスタマイズ(CSSで無理やり)のデモ

私のデモページでは強引な上書きでやっていますが、スマートなやり方は以下のサイトをご参照ください。

https://tr.you84815.space/slick/settings/dotsClass.html

ex16: 左右の「前へ」「次へ」ボタンをカスタマイズ(文字置き換え)

デフォルトでslickで用意された矢印アイコンが表示されていますが、これをオプションのprevArrownextArrowで書き換えます。
書き換えた後は位置調整が必要になるので、オリジナルのclass名を付加してCSSで調整します。

  $(function() {
    $('.arrow-text').slick({
      autoplay: true,
      dots: false,
      prevArrow: '<span class="slick-arrow_prev">←</span>',
      nextArrow: '<span class="slick-arrow_next">→</span>',
    });
  });

↓一例です。

.arrow-text .slick-arrow_prev,
.arrow-text .slick-arrow_next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}
.arrow-text .slick-arrow_prev {
  left: 10px;
}
.arrow-text .slick-arrow_next {
  right: 10px;
}
左右の「前へ」「次へ」ボタンをカスタマイズ(文字置き換え)のデモ

ex17: 左右の「前へ」「次へ」ボタンをカスタマイズ(画像置き換え)

今度は画像に置き換えてみます。
先ほどの文字置き換えと同様にオプションのprevArrownextArrowを使用しますが、今回はimgタグを記述します。

  $(function() {
    $('.arrow-text').slick({
      autoplay: true,
      dots: false,
      prevArrow: '<img src="/images/icon-slick-prev.svg" class="slick-arrow_prev" width="50px" height="auto">',
      nextArrow: '<img src="/images/icon-slick-next.svg" class="slick-arrow_next" width="50px" height="auto">',
    });
  });
左右の「前へ」「次へ」ボタンをカスタマイズ(画像置き換え)のデモ

ex18: background-imageで画像を配置(画面幅100%、高さ固定でトリミング)

レスポンシブ対応の場合、HTML上で画像を配置するより、CSSで背景画像として配置した方が各ブラウザで表示崩れが発生しずらくなったりします。
slideの親要素にスライドごとのclass名を付加し、background-imageで画像を指定します。

<div class="background-image">
  <figure class="figure-slide-01"></figure>
  <figure class="figure-slide-02"></figure>
  <figure class="figure-slide-03"></figure>
</div>

ご覧のとおり、HTMLはとてもシンプルになりました。
上記の親要素、スライドごとのclassに対して、トリミング、配置位置の調整をCSSで記述します。

.background-image figure {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.background-image figure.figure-slide-01 {
  background-image: url(/wp/wp-content/uploads/2019/05/thumb_ps.png);
}
.background-image figure.figure-slide-02 {
  background-image: url(/wp/wp-content/uploads/2019/05/thumb_xd.png);
}
.background-image figure.figure-slide-03 {
  background-image: url(/wp/wp-content/uploads/2019/05/thumb_dw.png);
}
background-imageで画像を配置のデモ

ex19: 縦方向スライド

上のキャプチャ、分かりずらいのですが縦スクロールしている途中のイメージです。

縦方向にスライドさせたい場合、オプションのverticaltrueにします。
なぜかデフォルトのslick.cssで縦型スライドの場合、スライドにborderが1px指定されているので、上書きでborder: none;にしました。

縦方向スライドのデモ

CSSで調整できること

Chromeの検証モードで変更したい要素のCSSの状況を見ながら調整していきましょう。

  • ページ読み込み時に一瞬スライドが縦に並んでしまうのを防ぐ(厳密には縦に並んでしまう一瞬をスライド非表示にしてかわす)
  • 中央のスライダー以外を半透明などにする
  • 「前へ」「次へ」ボタンの位置&サイズ
  • 無理やりですがページ送りのdotsの形状

ページ読み込み時の表示崩れをCSSで調整する方法は、下記サイトを参照してください。


Pocket
LINEで送る

back to top