【bxSlider】ブロガー必見！コピペだけで簡単にコンテンツスライダーを導入する方法

どうも皆さんこんにちは、ケンヂです。

先日Amazonアソシエイトのレポートをみていたらオナホが購入されていました。誰ですかうちのリンクからオナホを買った素敵な紳士は、怒らないから~~使い心地を~~説明しなさい。

おっと話がそれました。

最近ふと気づいたんですが、はてなブログを使ってる人たちってあまりスライダーを使っている感じないですよね。（これといって使う理由もないですが）

まぁ、そもそもスライダーの設置って多少なりとも知識がないと設置しづらいので仕方のない事だとは思いますが、レイアウトを充実させる為の選択肢としては是非知っておきたいところだと思いませんか？

というわけで今回は、コピペだけでスライダーを設置する方法を紹介していくぞ～(‘ω‘ )

今回紹介するスライダーの見本
各セクションに貼り付けるコード
bxSlider導入の際に注意しておきたいこと
- 動作の確認は必ず行う
- 画像データのリサイズと圧縮は必須
bxSliderをいじくり回したい方へ
まとめ

今回紹介するスライダーの見本

今回設置するスライダーの仕様として、PCでは3枠、スマートフォンでの表示は1枠となるように設定しています。

どちらの枠数も増減させることが可能ですが、スマートフォンでの表示数は変更しないことをオススメします。（見栄えが悪くなるので）

今回使用しているスライダーはbxSliderというもので、細かい設定は必要とせずにレスポンシブ対応のスライダーが設置できるという優れもの。

下記で紹介しているコードを各セクションにコピペするだけで見本のようなスライダーが導入できるのでオススメです。

尚、今回はヘッダーの直下に挿入する方法について紹介していますが、貼り付ける場所さえ変更すれば基本何処にでも設置できます。

各セクションに貼り付けるコード

※スライダーを設置する前にCSSなどのデータをバックアップしておくことをオススメします。

スライダーを読み込むためのコードを挿入

※今回紹介しているコードではcloudflareのライブラリからファイルを読み込んでいますが、wordpressを活用している人は配布サイトからファイルをダウンロードして活用したほうが良いかも。（読み込み速度なども変わるかと思います）

<!-- はてなブログの場合は 設定 ＞ 詳細設定 ＞ headに要素を追加 へ追加 -->

<!-- スライダー設定（headに挿入） -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- ←は既にjqueryを読み込んでいる場合は読み込まなくても大丈夫です -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>
<script>
  $(document).ready(function () {
    // initiates responsive slide gallery     
    var settings = function() {
      var settings1 = {
        minSlides: 1,
        maxSlides: 1,
        moveSlides: 1,
        mode: 'horizontal',
        startSlide: 0,
        captions: true
      };
      var settings2 = {
        minSlides: 2, //スライダーの最小数を設定
        maxSlides: 3, //スライダーの最大数を設定
        moveSlides: 1,
        mode: 'horizontal', //スライダーのスタイル設定。（他にもvartivcal, fade等があります）
        slideWidth: 272, //スライダーの大きさを設定。お好みで調整してください。
        startSlide: 0,
        slideMargin: 10,
        captions: true, //キャプションの有無
        adaptiveHeight: false
      };
      return ($(window).width()<630) ? settings1 : settings2;
    }

    var mySlider;

    function slideSetting() {
      mySlider.reloadSlider(settings());
    }

    mySlider = $('.slider').bxSlider(settings());
    $(window).resize(slideSetting);
  });
</script>

任意の場所にHTMLを挿入

<!-- ※リンク・画像url・キャプション用のタイトルは各自で設定して下さい -->
<!-- （はてなブログの方へ）ヘッダー直下に設置したい場合は デザイン ＞ カスタマイズ ＞ ヘッダ ＞ タイトル下 に挿入して下さい。 -->

<!-- 任意の場所に貼り付け -->
<div id="slider_wrap">
    <div class="slider">
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
        <div class="slide-inner"><a href="http://www.hogehoge.com/"><img src="任意の画像url" alt="画像の説明" title="キャプション用タイトル"></a></div>
    </div>
</div>

デザイン調整用のCSS挿入

/* はてなブログ用コメント

デザイン ＞ カスタマイズ ＞ デザインCSS 内に挿入

*/

/* フォントサイズ等は適宜調整していただいて構いません。 */

/* スライダー設定 */
.bx-wrapper{margin:0 auto;}

.bx-wrapper .bx-caption span{
    font-size:60%!important;
    padding:5px!important;
    line-height: 1.3em;
}

.slider div {
  display: none;
}
.bx-viewport .slider div {
  display: block !important;
}