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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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