ユーザー様の便宜を図るために bxSlider の情報を提供しますが、より詳細な設定方法・動作設定方法は【 サポート対象外 】となりますので予めご了承ください。

 

 

 

 

1. bxSlider について

 

当テーマのコンテンツスライダーは次の理由から bxSlider を利用しています。

 

  • 初心者でも比較的簡単に設置できる
  • レスポンシブやスワイプに対応している
  • サイト内に複数のスライダーがそれぞれ違う動作で設定できる
  • オプション機能が豊富に用意されていて様々な動作での見せ方ができる
  • WEB 上での情報も多いのでカスタマイズがしやすい

 

スライダーを利用するときは次の手順で設定してください。

 

 

 

 

2. 設定方法

 

【 1 】事前準備をする

 

次で設定してください。

新規設定や変更後は必ず [ 保存して公開 ] をしてください。

 

  • 管理画面　外観 ＞ カスタマイズ ＞ スクリプト・アクセス解析
  • 項　　目　スライダー ( bxSlider )
  • 作　　業　利用するをチェックする

 

 

【 2 】スライダーのソースを入力・編集する

 

ソースは 3 つのブロックで構成されています。

  1. スクリプト
  2. CSS
  3. スライダー画像

 

原本ソース






<ul id="slider1">

    • 

    • 

    • 

    • 
</ul>

     

     

    ( 1 ) スクリプト

     

    2 行目 ～ 14 行目まで。

    スライダーを動作させるプログラムで 6 行目 ～ 11 行目が詳細な動作設定の記述です。

    6 行目はスライドモードの設定で次の 3 つのモードがあります。

     

    fadeフェードイン・フェードアウトでスライド
    horizontal横にスライド
    verticall縦にスライド

     

    より詳細な動作設定をするときは次のサイト様を参考にしてください。

    参考サイト： bxsliderのオプション

     

     

    ( 2 ) CSS

     

    16 行目～ 22 行目まで。

    ブラウザ ( 特に IE ) によってはサイトを読み込んだときにスライダー画像が一瞬縦に並ぶ現象が起こりますので、ul 要素に一旦 display: none; を指定してスクリプト部分で再度読み込むようにしています。

     

     

    ( 3 ) スライダー画像

     

    24 行目～ 29 行目まで。

    画像 URL を設定する画像の URL に変更してください。

     

     

    【 3 】複数のスライダーを設定する場合

     

    ul 要素名を変更すると複数のスライダーを設定できます。

    4 / 5 / 17 / 18 / 20 / 24 行目の slider1 → slider2 に変更してください。

     

     

     

     

    3. 設定できる場所

     

    • 記事内
    • フリースペース
    • HTML 内

     

    記事内に設定するときは、コメント記述があると余白が空きますので、次を削除してください。

    <!-- スクリプト -->

    <!-- CSS -->

    <!-- スライダー画像 -->

     

     

     

     

    4. スライドモードサンプル

     

    スライドモード　fade

     

    スライドモード　horizontal

     

    スライドモード　vertical