ユーザー様の便宜を図るために情報を提供しますが、より詳細な設定方法・動作設定方法は【 サポート対象外 】となりますので予めご了承ください。
1. 当テーマのスライダーについて
当テーマは次の特長があるスライダーを予めご用意しています。
- 初心者でも比較的簡単に設置できる
- レスポンシブやスワイプに対応している
- サイト内に複数のスライダーがそれぞれ違う動作で設定できる
- オプション機能が豊富に用意されていて様々な動作での見せ方ができる
- WEB 上での情報も多いのでカスタマイズがしやすい
2. 事前準備
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 外観 ＞ カスタマイズ ＞ スクリプト
- スライダー
- slick / bxSlider のいずれかをチェックする
- 動作が安定していてバグが少ない slick：スリック をお勧めします
3. 設定方法
( 1 ) slick：スリック
【 1 】スライダーソースを入力・編集する
ソースは 3 つのブロックで構成されています。
- スクリプト
- CSS
- スライダー画像
原本ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!-- スクリプト：有りは true・無しは false を入力 --> <script> jQuery(function($){ $('#slider1').fadeIn(2000); $('#slider1').slick({ /* モード：フェード */ fade:false, /* モード：縦スライド */ vertical:false, /* 自動再生 */ autoplay:true, /* 切替速度：5000ミリ秒 */ autoplaySpeed:5000, /* 移動速度：1000ミリ秒 */ speed:1000, /* ドットナビ */ dots:true, /* 矢印ナビ */ arrows:false, }); }); </script> <!-- CSS --> <style> #slider1{display:none;} #slider1 .slick-slide{height:auto;} @media screen and (max-width:799px){ #slider1 .slick-slide{height:auto;} } </style> <!-- スライダー画像 --> <ul id="slider1"> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> </ul> |
1スクリプト
2 ～ 15 行目まで。
スライダーを動作させるプログラムで 6 ～ 12 行目が詳細な動作設定の記述です。
| 横スライド | horizontal
デフォルト |
|---|---|
| フェード | fade
6 行目を ※フェードイン・フェードアウトでスライド |
| 縦スライド | verticall
7 行目を |
より詳細な動作設定をするときは次のサイト様を参考にしてください。
参考サイト： slickドキュメント翻訳
2CSS
17 ～ 23 行目まで。
ブラウザによってはサイトを読み込んだときにスライダー画像が一瞬縦に並ぶ現象が起こりますので、ul 要素に一旦 display: none; を指定してスクリプト部分で再度読み込むようにしています。
3スライダー画像
25 ～ 30 行目まで。
設定する画像の URL / 横幅 / 縦幅 / alt に変更してください。
【 2 】複数のスライダーを設定する場合
ul 要素名を変更すると複数のスライダーを設定できます。
4 / 5 / 18 / 19 / 21 / 25 行目の slider1 → slider2 に変更してください。
( 2 ) bxSlider：ビーエックススライダー
【 1 】スライダーソースを入力・編集する
ソースは 3 つのブロックで構成されています。
- スクリプト
- CSS
- スライダー画像
原本ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- スクリプト --> <script> jQuery(function($){ $('#slider1').fadeIn(2000); $('#slider1').bxSlider({ mode:'horizontal',/* モード：horizontal , fade , vertical */ auto:true, /* 自動再生 */ pause:5000, /* 切替速度 5000ミリ秒 */ speed:1000, /* 移動速度 1000ミリ秒 */ pager:true, /* ドットナビ true , false */ controls:false, /* 矢印ナビ true , false */ }); }); </script> <!-- CSS --> <style> #slider1{display:none;} #slider1 li{height:auto;} @media screen and (max-width:799px){ #slider1 li{height:auto;} } </style> <!-- スライダー画像 --> <ul id="slider1"> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> <li><img src="画像URL" width="画像横幅" height="画像縦幅" alt=""></li> </ul> |
1スクリプト
2 ～ 14 行目まで。
スライダーを動作させるプログラムで 6 ～ 11 行目が詳細な動作設定の記述です。
6 行目はモードの設定で次の 3 つのモードがあります。
| 横スライド | horizontal |
|---|---|
| フェード | fade
※フェードイン・フェードアウトでスライド |
| 縦スライド | verticall
※スマホでスワイプがやり辛いためお勧めしません |
より詳細な動作設定をするときは次のサイト様を参考にしてください。
参考サイト： bxsliderのオプション
2CSS
16 ～ 22 行目まで。
ブラウザによってはサイトを読み込んだときにスライダー画像が一瞬縦に並ぶ現象が起こりますので、ul 要素に一旦 display: none; を指定してスクリプト部分で再度読み込むようにしています。
モード【 fade 】で 画像非同期 を設定しているときは CSS の修正が必要です。次のように変更してください。
|
16 17 18 19 20 21 22 |
<style> #slider1{display:block;} #slider1 li{height:auto;} @media screen and (max-width:599px){ #slider1 li{height:auto;} } </style> |
17 行目 を display:block に変更してください。
3スライダー画像
24 ～ 29 行目まで。
設定する画像の URL / 横幅 / 縦幅 / alt に変更してください。
【 2 】複数のスライダーを設定する場合
ul 要素名を変更すると複数のスライダーを設定できます。
4 / 5 / 17 / 18 / 20 / 24 行目の slider1 → slider2 に変更してください。
4. 設定できる場所
- 記事内
- フリースペース
- HTML 内
記事内に設定するときは、コメント記述があると余白が空きますので、次を削除してください。
<!-- スクリプト -->
<!-- CSS -->
<!-- スライダー画像 -->
5. モードサンプル
スライドモード：横スライド
スライドモード：フェード
スライドモード：縦スライド