自由に書くのがおれのインターネットだ。

「おれのインターネット」。タイトル通りのブログ。ただし、内容はまったくパンクではありません。

はてなブログにSwiperのスライダーを設置

その他

Swiperを使ったスライダーをはてなブログのフッターに追加した。

idangero.us

基本的には下記のサイトにある通りなのだが、そのままでは動かなかったのでここに記録しておく。

yantzn.com

スクリプトの読み込み

スライダーにはSwiperというライブラリを利用するのでそれを読み込む。「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」に以下のように入力する。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

はてなブログのrssからajaxで記事をとってくるためにjQueryを利用するのでそれも読み込む必要があった。

スライダーの埋め込み

ブログの該当箇所にスライダーを埋め込む。今回はフッターにしたが、ヘッダーでも同じことです。

「デザイン」→「カスタマイズ」→「フッター」もしくは「ヘッダー」→「タイトル下」に下記のコードを入力する。

コード中に自分のブログRSSのURLを指定するところがあるので忘れずに。

<div class="swiper-container">
  <div class="swiper-wrapper"></div>
  <div class="swiper-pagination swiper-pagination-black"></div>
  <div class="swiper-button-prev swiper-button-black"></div>
  <div class="swiper-button-next swiper-button-black"></div>
</div>

<script>
$(function(){
  var mySwiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    loop: true,
    simulateTouch: true,
    slidesPerView: 3,
    slidesPerGroup: 3,
    spaceBetween: 30,
    centeredSlides: false,
    initialSlide: 0,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      780: {
        slidesPerView: 1,
        slidesPerGroup: 1,
        spaceBetween: 10
      },
      960: {
        slidesPerView: 2,
        slidesPerGroup: 2,
        spaceBetween: 20
      }
    }
  });

  $.ajax({
    type: 'GET',
    url: 'https://amabiee.hatenablog.com/rss',  // 自分のブログのURLに変更する
    dataType: 'xml',
    success:function(res){
      $(res).find("item").each(function(i){
        if (i >= 12){  // 読み込まれる記事数の上限
          return false;
        }
        var link = $(this).find("link").text();
        var title = $(this).find("title").text();
        var img = "url(" + $(this).find("enclosure").attr("url") + ")";
        mySwiper.prependSlide($("<div></div>", {"class":"swiper-slide"})
          .css("background-image", img)
          .append($('<p></p>', {"class": "text"}).text(title))
          .append($('<a></a>').attr("href", link)));
      });
    }
  });
});
</script>

"slidesPerView"で一度に表示される記事数、"autoplay"の"delay"で切り替わるの時間（ミリ秒単位）が指定できる。そのほかはSwiperのページを参考にして下さい。

スタイルシートの設定

「デザイン」→「カスタマイズ」→「デザインCSS」の最下部に以下のコードを追加する。

大きさは最初のheightとfont-sizeあたりをいじると良い。

/* ----------------------------------------
* Swiper
* ---------------------------------------- */

.swiper-container {
    /* width: 1174px; */
    height: 150px;
}

.swiper-slide {
    text-align: center;
    font-size: 14px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.swiper-slide .text {
    width: 100%;
    font-size: 100%;
    text-align: center;
    bottom: 0px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
}

.swiper-slide a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
}

.swiper-slide:hover {
  filter:alpha(opacity=70); /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)"; /* IE 8, 9 */
  -moz-opacity:0.7; /* FF, Netscape */
  -khtml-opacity: 0.7; /* Safari 1.x */
  opacity: 0.7;
  zoom: 1; /*IE*/
}

@media screen and (max-width: 780px) {
  .swiper-container {
    width: 100%;
    height: 250px;
  }
}

@media screen and (min-width: 780px) and (max-width: 960px) {
  .swiper-container {
    width: 750px;
    height: 250px;
  }
}
前・次ページボタンなどの色を変更

スライダーの遷移ボタンの色は上の設定では黒になっている。埋め込みの部分で"swiper-button-black"としている箇所がそれで、"swiper-button-white"とすれば白色、何も書かなければ水色になる。

このブログのデザインはEvergreenという公式テーマを利用しているため、それに合わせて緑色に変更した。

このカスタマイズには以下のサイトを参考にした。

garigaricode.com

まず、スタイルシート（「デザインCSS」）に以下の独自スタイルを追加する。

.swiper-button-prev.swiper-button-green,
.swiper-container-rtl .swiper-button-next.swiper-button-green {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2364beb3'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-green,
.swiper-container-rtl .swiper-button-prev.swiper-button-green {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2364beb3'%2F%3E%3C%2Fsvg%3E");
}

.swiper-pagination-green .swiper-pagination-bullet-active {
  background: #64beb3;
}

.swiper-pagination-progressbar.swiper-pagination-green {
  background: rgba(100, 190, 179, 0.25);
}

.swiper-pagination-progressbar.swiper-pagination-green .swiper-pagination-progressbar-fill {
  background: #64beb3;
}

"background-image"のURLに"l%3D'%2364beb3'%2F%3E"のような部分があり、この"64beb3"が色を示している。これを好きな色にするとよい。

"swiper-pagination-progressbar"の色には同じ色をRBGに変換した値を利用した。カラーコードの変換は例えば以下のサイトなどでできる。

カラーコード変換｜各種設定用のカラーコードに変換 | すぐに使える便利なWEBツール | Tech-Unlimited

これで新たに"swiper-button-green", "swiper-pagination-green"というスタイルができたのでそれを利用するように変更する。スライダーを埋め込んでいる箇所を以下のように修正する。

<div class="swiper-container">
  <div class="swiper-wrapper"></div>
  <div class="swiper-pagination swiper-pagination-green"></div>
  <div class="swiper-button-prev swiper-button-green"></div>
  <div class="swiper-button-next swiper-button-green"></div>
</div>

Swiperのデフォルトのスタイルシートを参考にした。

github.com

というわけで以下のようになった。

f:id:amabiee:20190614163312p:plain

こういうのはヘッダーに配置するもんと思うが記事が読みにくくなるのでフッターにした。記事数も少ないので意味あるのか？という感じだが、モチベーションの維持につながる……はず。