にーとのかがみ。

読者です 読者をやめる 読者になる 読者になる

にーとのかがみ。

沖縄在住のニートブロガーが沖縄のニートで頂点を取るべく書き綴るブログです。

にーとのかがみ。

Pick Up Entry

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

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

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

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

おっと話がそれました。

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

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

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

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

 

今回設置するスライダーの仕様として、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;
}

bxSlider導入の際に注意しておきたいこと

動作の確認は必ず行う

何かしらのカスタマイズをしたあとには必ず動作確認は行ったほうが良いですね。

本当であれば複数のデバイスで確認するべきなのでしょうが、いくつもデバイスを持っているという人はなかなかいないはず。

ということでとりあえず下記のデバイスでチェックするようにして下さい。

 

  • パソコン
  • スマートフォン

 

最低でもこれらのデバイスで動作チェックをしておかないと、思わぬエラーやバグを放置してしまう原因となるので注意しましょう( ˘ω˘)

スポンサーリンク

画像データのリサイズと圧縮は必須

当たり前のことですが、スライダーに設置する画像の数が多くなるほど読み込み速度が遅くなります。

その為、少しでも読み込み速度を向上させるために画像データの【リサイズ】【圧縮】は必須です。

既にある画像を一気にリサイズしたいという人は、とりあえず縮小専用。というソフトを使えば簡単に圧縮・リサイズが出来るのでオススメ。

画像データの圧縮だけを行いたいという人はTinyPNGを使うと幸せになれるかもしれない。

縮小専用。の使い方はこちらから。
縮小専用(画像サイズ縮小) インストール & 使い方

bxSliderをいじくり回したい方へ

bxSliderは拡張性が高く、設定により様々な動作をさせることが可能です。

設定項目も多岐にわたり、誰でも簡単に設定ができるのも魅力。

もしbxSliderに細かい設定を加えたいという方は下記の参考サイトを見ながら設定すると良いでしょう。かなり細かく記載されているので初心者でもわかりやすいと思います。

まとめ

ブログにスライダーを設置するだけで印象がガラリと変わるから、今のデザインに飽きてきたという方は一度使ってみては如何でしょうか。

…さて、今回も何だかんだ頑張って記事を書いたので今日はゲームしかしないぞ!僕はトリコにイーソイソイしてやるんだい!!(大鷲のトリコにはまってます)

おわりっ!