【超初心者向け】はてなブログに画像スライダーを入れる方法を徹底解説！

Splide（スプライド）って何？

スライダーを入れるには、Splide？を使えばいいってのはなんとなくわかったけど、そもそもSplideって何？

ざっくり言うと、「めちゃくちゃ軽くて、設定が簡単なスライダー作成ツール」のことじゃ！
昔は「jQuery」という難しい仕組みが必要だったんじゃが、Splideならそれも不要。初心者にはうってつけのツールなんじゃよ。

なるほど、つまり私でも簡単にできるってことね！
それで、どうやるの？

Splideのスライダーをはてなブログに貼り付ける

まずは、Splideを動かすための「おまじない」をブログに追加するんじゃ。

ステップ1：Splideを読み込む

はてなブログの管理画面から、
「設定」＞「詳細設定」＞「head要素にメタデータを追加」

を開いて、以下のコードを貼り付けます。

See the Pen Splide読み込みサンプル by toshihide (@toshihide2000) on CodePen.

読み込み完了！次は？

ステップ2：スライダーを表示させる場所を作る

次に、実際に画像が表示される「枠組み」を作るぞ！

はてなブログの管理画面から、
「デザイン」＞「カスタマイズ（スパナのアイコン）」＞「ヘッダ」
を開いて、一番下の「タイトル下」の部分に以下のコードを貼りつけます。

<!-- スライダー本体 -->
<div id="image-slider" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="画像のURL1" alt="画像1">
      </li>
      <li class="splide__slide">
        <img src="画像のURL2" alt="画像2">
      </li>
      <li class="splide__slide">
        <img src="画像のURL3" alt="画像3">
      </li>
    </ul>
  </div>
</div>

OK！できた！
でもまだ何も表示されないみたい

最後のステップじゃ！スライダーの設定を追加するぞ！

ステップ3：動きをつける（自動再生）

今度は、
「デザイン」＞「カスタマイズ」＞「フッタ」
に以下のコードを貼り付けます。

<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#image-slider', {
      type   : 'loop',      // ループさせる
      autoplay: true,      // 自動再生
      interval: 3000,      // 3秒ごとに切り替え
      pauseOnHover: false, // マウスを乗せても止めない
    } ).mount();
  } );
</script>

まとめ

どうじゃ？スライダーが動かせたじゃろ？

ほんとだ！動いてる！
なんかブロガーって感じがしていいね〜〜

そうじゃろう！ちなみに、このブログの中の人はこういったプログラミングが得意だから、ブログで困ったことがあれば相談してみてくれ！