それは仕様です。

「それは仕様です。」は雑記ブログです! 主にIT関連・考えたこと・勉強したことをここに残しています。 「Re:ゼロから言語の再勉強中。」

【はてなブログカスタマイズ】はてなブログにSwiperを使ってスライダーを実装してみた


f:id:yantzn:20180315225049p:plain

出典:Swiper - Most Modern Mobile Touch Slider

どうも、やん(@yan_tzn)です。

ブログテーマをZENO-TEALに変更しました!

こんな感じでZENO-TEALには、タイトル下にオススメ記事を表示する カスタマイズが紹介されているのですが、

f:id:yantzn:20180315193132p:plain 出典:カスタマイズ1:ヘッダー(タイトル下)におすすめ記事を並べて表示する - ZENO-TEAL

今回は、オススメ記事部分を変更してSwiperを使ってスライダーを実装したいと思います。

コピペだけで簡単に実装できる内容です。

Swiper

f:id:yantzn:20180315230242p:plain 出典:UNIQLO|ユニクロ公式オンラインストア

SwiperはjQuery不要のスライダーで、動作が軽く、多くのオプションが用意されているので、カスタマイズ性に優れているのがポイント。 そして、画像・動画など表示させることができます。

UNIQLOのサイトのように、コンテンツスライドを手軽に実装できるのです!

Swiper Demos

完成形

■PC版

f:id:yantzn:20180317011423p:plain

■モバイル版

f:id:yantzn:20180317011253p:plain

スライドに表示するコンテンツは、自分のRSSから最新記事12件分を PC版では三枚一組のスライダーで、モバイル版だと1枚ずつスライダーを表示するようにしたいと思います。

さっそく実装をしておきます。

headに要素を追加

はてなブログでは、『css』と『js』のファイルをアップロードして使用することはできないためCDNで読み込ませます。

『設定』→『詳細設定』の『headに要素を追加』に以下を記述します。

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

これでSwiperを使う準備はできました。

次に実際のSwiperのコードを記述していきます。

タイトル下

『デザイン』→『カスタマイズ』→『ヘッダ』の『タイトル下』に以下を記述します。

■HTML

<div class="swiper-container">
    <!-- スライダー部分 -->
    <div class="swiper-wrapper"></div>
    <!-- ページネーション(ドットのやつ)が必要な場合 -->
    <div class="swiper-pagination"></div>
    <!-- 左右の矢印ボタンが必要な場合 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

上記、HTMLがSwiper表示部分になります。

■JavaScript

<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: 3500,
         disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints:  // ブレイクポイントを設定する場合。
        {
            780: {  // 横幅が780px以下で、下記設定に書き換える。
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 10
            },
            960: {  // 横幅が960px以下で、下記設定に書き換える。
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 20
            }
        }
      }
  );

  //RSSから取得した情報から記事タイトル・記事リンク・サムネイルをパース
  $.ajax({
      type: 'GET',
      url: 'http://www.yantzn.com/rss',
      dataType: 'xml',
      success:function(res){
        $(res).find("item").each(function(i) {
            //最新記事から12件分を取得
            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>

上記、JSではSwiperの設定と自分のRSSから最新記事12件分をajaxで取得する処理を記述します。

ajaxでは、RSSから記事のタイトルと記事リンク・取得した記事内の一番最初の画像を取得して Swiperのコンテンツを作成しています。

やり方によっては、PV数が多い記事を取得して表示などもできそうです。

Swiperのオプションについては、下記サイトがわかりやすい。

reiwinn-web.net

デザインCSS

Swiperのコンテンツのデザインをカスタマイズするため

『デザイン』→『カスタマイズ』の『デザインCSS』に以下を記述します。

■CSS

/* ----------------------------------------
* スワイパー
* ---------------------------------------- */
.swiper-container {
    width: 1174px;
    height: 250px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    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*/
}

/* 780px以下用(スマートフォン用)の記述 */
@media screen and (max-width: 780px){
    .swiper-container {
     width: 100%;
     height: 250px;
    }
}

/* 960px以下用(スマートフォン用)の記述 */
@media screen and (min-width: 780px) and (max-width: 960px)  {
    .swiper-container {
     width: 750px;
     height: 250px;
    }
}

以上で、Swiperの実装は完了です。

まとめ

スライダーを実装してみた感想としては、スマートフォンでも効率よくコンテンツを表示させるにのにとても良い機能だと思いました。

また、PV数が多い記事や関連記事を表示してみたりとアイデアをふくらませて使用できそうです。

是非、実装してみてください。


本日は以上です。ありがとうございました!

Twitterフォロー・読者登録募集中です!

関連記事

www.yantzn.com

www.yantzn.com

www.yantzn.com

www.yantzn.com