WordPressでブログを作成している方にはお馴染みのスライダー。
ブログに動きが出て楽しそうなのですが、はてなブログだとできないものだとばかり思っていました。
けれども、実際にスライダーをはてなブログに設置されている方をお見掛けして、どうやってやるのか調べてみました。
スライダーのプラグインのFlickityとは
今回やってみるスライダープラグインのFlickityは、レスポンシブに対応したフリック可能なjQueryスライダープラグインです。
スライダーの設定は簡単で、「jQueryやJavaScriptはよくわからないけれど、CSSの設定なら大丈夫」というノンプログラマーでも設置しやすいようになっている簡単設計。
自動再生や無限ループなどのオプションが利用できます。
Flickity Flickity · Touch, responsive, flickable carousels
スライダーのプラグインを利用する場合、本当だったらプラグインのファイルをダウンロードして、サーバーにアップロードして使うみたいなのですが、はてなブログだとファイルをアップロードすることがそもそもできないですよね。
ですが、このスライダープラグインのFlickityでは、CDNが用意されているので、ファイルをサーバーにアップロードしなくても利用できるみたいです。
スライダーのプラグインのFlickityの導入方法
手順1 ヘッダー部分を記載する
まずは、jQuery本体とCDNのリンクをヘッダー部分に記述します。
「 設定」→「詳細設定」→「<head>要素にメタデータ」を追加
<script src="js/jquery-3.6.0.min.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
※ <head>部分に何か入っていた時は絶対に消さないでください。
※jquery本体がすでに記載されている場合は一番上の行は必要ありません。重複して書かないようにしてください。
※js/jquery-3.6.0.min.jsがjQuery本体を読み込むための記述で、その後にflicktityを読み込む記述です。この順番が逆でもスライダーは動かないので、先に本体を読み込むように記述します。
手順2 フッターにJavaScriptを記述する
次にJavaScriptをフッターに記述します。
「 デザイン」→「 カスタマイズ」→「フッタ」をクリックします。フッタ部分に何か入っている場合は最後に下記の記述を追記します。
<script> var elem = document.querySelector('.main-carousel'); var flkty = new Flickity( elem, { // options cellAlign: 'center', contain: true }); // element argument can be a selector string // for an individual element var flkty = new Flickity( '.main-carousel', { // options }); </script>
手順3 HTMLを記述する
今回はヘッダー部分下に置きたいので、「 デザイン」→「 カスタマイズ」→「ヘッダ」→「ヘッダブログタイトル下」に、下記の記述を記載します。
タイトルは任意
<div class="main-carousel"> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> <div class="carousel-cell"><a href="リンク先のURL"><img src="画像URL" alt="" width="画像横幅" height="画像高さ"></a></div> </div>
※モードはHTMLを選びます。
リンク先のURLと画像URL、画像の横幅、画像の高さを編集してから貼り付けます。 画像は大きいと動作が重たくなってしまうので、スライダー用に少し小さめサイズを用意したほうがいいかもしれません。
オプションが色々と設定できるみたいなのですが、とりあえず「セルの最後に無限スクロールのために反対側の端に折り返す」オプションを設定しました。
wrapAround: true
↑これをJavaScriptのオプションのところに付け加えるだけで無限スクロールします。
手順2のJavaScriptの記述の
// options cellAlign: 'center', contain: true, wrapAround: true
↑一番下にカンマ区切りで入力するだけの簡単設定でした。
補足
セルとセルの隙間を空けたい場合は、「 デザイン」→「 カスタマイズ」→「 デザインCSS」に下記を記述します。
.carousel-cell { margin-right: 10px; }
他にもいろいろなオプションがあるみたいなので試してみたいと思います。
オプションについて
公式サイトでオプションの説明がされていますので詳しくは公式サイトを見ていただきたいのですが、簡単にオプションについて触れておきます。
feeScroll
セルを終了位置に揃えることなく、コンテンツを自由にスクロールおよびフリックできるようにします。
freeScroll: true
wrapAround
セルの最後で、もう一方の端にラップアラウンドして無限にスクロールします。「true」でループ、「false」でループしない。
wrapAround: true
groupCells
スライド内のセルをグループ化します。フリック、ページ ドット、前/次のボタンは、個々のセルではなく、グループ スライドにマップされます。 is-selected クラスは、選択したスライドの複数のセルに追加されます。
autoPlay
次のセルに自動的に進みます。
自動再生は、マウスをホバーすると一時停止し、マウスをオフにすると再開します。カルーセルをクリックするかセルを選択すると、自動再生が停止します。
autoPlay: true
autoPlay: 1500
↑セルを {Number} ミリ秒進めます
1500 は 1.5 秒ごとにセルを進めます
autoPlay: 1500, pauseAutoPlayOnHover: false
↑ユーザーがカルーセルにカーソルを合わせると、自動再生が続行されます。
cellAlign
カルーセル要素内のセルを整列します。デフォルトは中央寄せ。
cellAlign: 'left'
cellAlign: 'right'
contain
最初または最後に余分なスクロールを防ぐために要素をカルーセルするセルが含まれています。 wrapAround: true の場合は無効
contain: true
prevNextButtons
前と次のボタンを作成して有効にします。デフォルトで有効 prevNextButtons: true。
prevNextButtons: false
pageDots
Creates and enables previous & next buttons. Enabled by default
prevNextButtons: true
pageDots: false
他にもたくさんオプションの設定があるのですが、書ききれないので公式サイトでご確認ください。
JavaScriptを使わない書き方
Flickityでは、JavaScriptを使わずにHTML5の属性を利用して書く方法もあります。
導入手順の2を書かずに、導入手順3のHTMLタグのdivクラスの後に下のようなオプションの記述をしても動きます。
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
オプションをたくさん設定する場合はJavaScriptを、そうでない場合はHTML5の属性を利用すると簡単でいいかもしれないです。
雑感
はてなブログにスライダーを設置できるかどうか試してみた結果、意外と簡単にできました。他のプラグインもサーバーに直接ファイルをアップロードするタイプではなくCDNが利用できるタイプなら使えるかもしれませんね。
※素人のおばさんが書いている記事なので間違っていることがたくさんあるかもしれませんが、そんな時はコメント欄などで優しく教えてくれるとうれしいです。
