Fusion Slider スライダーオプション

Fusion Slider Options

ホーム/Fusion Core/Fusion Slider/Fusion Slider スライダーオプション
  • Fusion Slider スライダーオプション

このコンテンツでは、【Fusion Slider スライダーオプション】について解説をしています。

いちばん手軽なスライダーであるElastic Sliderは、テーマオプションでスライダーの設定をしました。
しかし、この方法だとElastic Sliderを複数作成した場合、Aのスライダーはこの設定で。。。Bのスライダーはこの設定で。。。というような、スライダー毎の設定をすることができません。また、動画をスライダーに組み込むこともできませんでした。

そこで活躍するのがFusion Sliderです。
Fusion Sliderでは、YouTubeやVimeoといった動画を再生することができ、またスライダー毎に個別の設定をすることができます。

子となるスライドについての解説は、Fusion Slides 画像スライドFusion Slides 動画スライドでそれぞれご覧ください。

サクッと画像で概要を見たい方はこちら

0.スライドの表示順について

Elastic SliderやPortfolioなどでは、プラグインを使用し投稿の一覧画面を操作することで、スライドやカテゴリの表示順を変更することができましたが、Fusion Sliderでは一覧画面から順番を入れ替えてもスライド順を変更することはできません。

Fusion Sliderでスライドの表示順は以下の通りです。投稿日時が新しい = 最初に表示される | 投稿日時が古い = 最後に表示される

スライド順を変更したい場合は、次のようにクイック編集などで時間または日付を変更しましょう。


2017年4月1日15時にスライド1を作成。
2017年4月1日16時にスライド2を作成。
スライド2→スライド1の順でスライダーで表示されます。

スライド2を2017年4月1日14時に変更。
スライド1→スライド2の順でスライダーで表示されます。

1.Name / 名前

Fusion Sliderの名前

このオプションは

  1. Fusion Slidersの一覧画面
  2. Fusion Page Options > SlidersでFusion Sliderを選択した場合
  3. エレメントからFusion Sliderを選択した場合
  4. ショートコードからFusion sliderを選択した場合

に表示されるスライダーの名前を付けます。

各一覧に表示されるものなので、日本語でも大丈夫です。

2.Shortcode / ショートコード

このオプションは、ショートコード用の名前を付けます。
小文字、数字、ハイフンが使用できます。

ショートコードについてAvada全体に言えることですが、テキストブロックの【タグを閉じる】の横にある【Fusion Themeアイコン】から直接挿入できるため、わざわざ以下のようなものをコピペして、テキストブロックに貼り付けて使用することはまずないかと思います。

ただし、Contact Form 7やスライダーに表示できるボタンなど、【Fusion Themeアイコン】が表示されない場所でAvadaのショートコード機能を使いたい場合に、ショートコードの仕組みを理解しておくと便利です。

3.Slider Size / スライダーの大きさ

このオプションは、スライダーの大きさをpx単位で設定することができます。

幅の設定は【max-width】扱いになるので、【5.Full Screen Slider / フルスクリーン】のオプションを有効にする場合は、この設定を必ず【100%】にしましょう。

4.Slider Content Max Width / スライダーコンテンツの最大幅

Fusion Slider スライダーコンテンツの最大幅

このオプションは、スライドに挿入する文字やボタンなどのコンテンツ幅を設定することができます。
何も記入しない場合は、テーマオプションで設定する【サイトの幅】に従います。

画像は、500px幅と1000px幅で比較したものになります。
コンテンツ(文字量)が多い場合は、大きめの幅を設定するといいでしょう。

5.Full Screen Slider / フルスクリーン

このオプションを有効にすると、フルクリーンスライダーになります。

【3.Slider Size / スライダーの大きさ】でも述べましたが、この設定を有効にする場合は必ず幅を100%にしておきましょう。

6.Parallax Scrolling Effect / パララックス効果

このオプションを有効にすると、スライダーにパララックス効果を与えます。

この設定の効果があるのは以下で選択した場合のみです。『Fusion Page Options』 → 『Sliders(スライダー)』 → 『Slider Type(スライダーの種類)』

エレメントやショートコードでは効果がないので注意しましょう。

7.Display Navigation Arrows / ナビゲーション矢印の表示

Fusion Slider ナビゲーション矢印の表示

このオプションを有効にすると、スライドが複数ある場合にスライダーにナビ矢印を表示させることができます。

8.Navigation Box Size / ナビのボックスサイズ

Fusion Slider ナビのボックスサイズ

このオプションは、【7.Display Navigation Arrows / ナビゲーション矢印の表示】を有効にした場合に、ナビのボックスサイズを設定することができます。

9.Navigation Arrow Size / ナビの矢印サイズ

Fusion Slider ナビの矢印サイズ

このオプションは、【7.Display Navigation Arrows / ナビゲーション矢印の表示】を有効にした場合に、ナビの矢印の大きさを設定することができます。

10.Display Pagination Circles / ページネーションの表示

Fusion Slider ページネーションの表示

このオプションを有効にすると、スライドが複数ある場合にページネーションを表示することができます。

11.Autoplay / 自動再生

このオプションを有効にすると、スライドが複数ある場合に最後のスライドになるまで自動で切り替えることができます。

12.Slide Loop / スライドの繰り返し

このオプションを有効にすると、【11.Autoplay / 自動再生】を有効にしている場合に、最後のスライドになると最初のスライドに戻ってループ再生することができます。

13.Animation / アニメーション

このオプションは、スライドを切り替える際のアニメーションを、フェードまたはスライドから選択することができます。

Please Note: Fade effect does not work in IE.(フェード効果はIEでは無効です。)

Avadaの注意書きにこのように記載されていますが、IEやChromeなど一部のブラウザで【スライド効果】が無効になります。

14.Slideshow Speed / スライドショーのスピード

このオプションは、【11. Autoplay / 自動再生】を有効にしている場合のスライドが表示されている時間(ミリ秒)を設定することができます。

5000で設定すると5秒間スライドが表示されます。

15.Animation Speed / アニメーションのスピード

このオプションは、スライドが切り替わる際のアニメーション速度を設定することができます。

この設定を大きな値にすればするほどゆっくりとスライドが切り替わりますが、【11. Autoplay / 自動再生】を有効にしている場合は【14. Slideshow Speed / スライドショーのスピード】より低い値にしましょう。


14. Slideshow Speed / スライドショーのスピード = 5000
15. Animation Speed / アニメーションのスピード = 2000
2秒かけてスライドが切り替わり、残りの3秒間で切り替わったスライドが表示されます。

16.Responsive Typography Sensitivity / フォント設定の感度

このオプションは、モバイルデバイスからスライダーを見た場合の【Heading Area(h2)】のフォントサイズを調整することができます。


1 = 31.05px
0.5 = 45.525px
0.1 = 57.105px

この値を大きくすればするほどリサイズ率が上がるため、フォントサイズが小さくなります。
(フォントサイズの設定環境により、この設定が同じ値でもフォントサイズは変わります)

17.Mininum Font Size Factor / 最小フォントサイズ係数

このオプションは、モバイルデバイスからスライダーを見た場合の【Caption Area(h3)】に記入したフォントサイズを調整することができます。


1.5 = 24px
1 = 16px
0.6 = 12.42px

1を基準に大きくするとフォントサイズが大きくなり、小さくするとフォントサイズが小さくなります。
(フォントサイズの設定環境により、この設定が同じ値でもフォントサイズは変わります)

2017/05/08|カテゴリー: Fusion Core, Fusion Slider|タグ: , , |

コメントする