【スライダーセクション】 画像スライドショーの設置

Emanon Proは、フロントページのファーストビューに背景画像のスライドショーとCTAを設置することができます。

スライドアニメーションは、フェード（徐々に画像が消えて、次の画像が浮かび上がる）とスライド（右から左に移動）の２種類から選べます。

上記画像は、画像とメッセージをフェード表示に設定した場合の表示例です。

ファーストビューレイアウトは全部で6パターンあります。残りの設定は下記をご覧ください。

スライドショーの表示設定

まず、WordPress管理画面＞外観＞カスタマイズ＞フロントページ設定＞ファーストビューレイアウト設定をクリックします。

次に、「スライダーセクション」をチェックを入れてください。

WordPress管理画面＞外観＞カスタマイズ＞フロントページ設定＞スライダーセクションをクリックします。

レスポンシブスライダー画像

レスポンシブスライダー画像にチェックを入れる（有効にする）と、WEBブラウザの画面サイズに合わせて自動でスライダー画像の高さが調整され、スマホからサイトを見ると、スライダー画像が全画面表示されるようになります。

［注意］レスポンシブスライダー画像を有効にするとSP用スライダー画像は表示されません。

画像の設定

サイト訪問者に伝えたいメッセージをタイトルとサブ・タイトルに入力（任意）します。

初期値では、タイトルに「Welcome to Emanon」、サブ・タイトルに「Ready to Start Your Own Business?」が反映されています。自由に編集を加えてください。

スライドに登録できる画像は最大5枚です。PCとスマホでは画面の横幅が異なるため、スライダー画像の内容によってはPC用とスマホ用にそれぞれ画像を用意する必要があります。スマホ用のスライダー画像は、SP用スライダー画像にアップしてください。スマホ実機でサイトを見ることで、SP用スライダー画像の反映状況を確認できます。

［注意］SP用スライダー画像に画像がセットされていない場合は、スライダー画像がスマホで表示されます。

メッセージとCTAボタンの設定

スライド画像の上に、メッセージとCTAボタンを表示することが可能です。CTAとは、Call To Action(コールトゥアクション)の略で、サイト訪問者に資料請求やメールマガジンの登録などをアクションを誘導する仕組みを意味します。

ボタンURLには、あらかじめ用意しておいたお問い合わせページなどのURLを入力します。ボタンテキストにはクリックする目的が伝わるような表現を入力しましょう。

メッセージの表示位置は、「左配置」・「中央配置」・「右配置」の３つから設定することができます。スライド画像の内容に合わせて、配置場所をお選びください。

スライダー画像の高さ

画像の表示（高さ）は数値を変更することで、スライダー画像のサイズを調整することができます。例えば、サイトのファーストビューを高さ600pxに設定する場合、横：1920px以上、高さ：600pxの画像をアップロードします。

スライダーの表示設定

スライド画像とテキストの表示に関する設定を行います。初期値の状態では、スライドは自動でスタートしませんのでご注意ください。スライドの自動スタート設定については後述します。

スライダー画像の速度（初期値：4000)

画像スライダーのアニメーションスピードを調整することが可能です。初期値は4000（4秒）間隔で、スライダーが動く設定となっています。

スライダーの設定

「フェード」か「スライド」をお選びください。

注意：スライドの自動スタート

サイトを閲覧した際に、自動でスライドを始めたい場合、「スライドの自動スタート」にチェックを入れます。スライド画像が1枚しかアップロードしない場合は、オフにしましょう。

コントロールの表示

スライド画面の両端に矢印アイコンを表示したい場合、「コントロールの表示」にチェックを入れます。

ページャーの表示

スライド画面の下にスライド切り替え用のアイコンを表示したい場合、「ページャーの表示」にチェックを入れます。

テキストスライダーの停止

「タイトル」＋「サブ・タイル」のアニメーションを停止したい場合、「テキストスライダーの停止」にチェックを入れます。「タイトル」＋「サブ・タイル」が1組みしかない場合は、オフにしましょう。

テキストスライダーの設定

「タイトル」＋「サブ・タイル」のアニメーションの動きを「フェード」か「スライド」から選ぶことができます。

テキストスライダーの速度（初期値：4000)

テキストスライダーのアニメーション速度を調整することが可能です。

配色の設定

「タイトル」、「サブ・タイル」「ボタン」の配色に関する設定を行います。スライド画像の色味に合わせて、視認性が高まる配色を心がけてください。

背景色［開始］・背景色［終了］・角度

背景色［開始］と背景色［終了］に異なる色を指定することで、グラデーション色にすることが可能です。また、グラデーションの境界線は、角度を調整することが可能です。

パターンフィルター

ドット柄かチェック柄のパターンを背景画像の上に重ねることができます。

背景色の透過率

スライダーを左に寄せると透過率が高くなり、背景色［開始］・背景色［終了］の色が薄くなります。スライダーを右に寄せると透過率が低くなり、背景色［開始］・背景色［終了］の色が濃くなります。

jQuery「bxSlider」

Emanon Proは、スライド画像に「bxSlider」を使用しています。

「bxSlider」のオプション

「bxSlider」のオプションを使用する場合、emanon proのcustom.min.jsを編集します。custom.min.jsは、emanon pro本体の libフォルダ > jsフォルダ内にあります。

var slider=$("#bxslider");slider.bxSlider({mode:slider.data("animation"),speed:slider.data("speed"),pager:slider.data("pager"),controls:slider.data("controls"),useCSS:!1,auto:slider.data("auto"),infiniteLoop:!0,onSlideAfter:function(){slider.startAuto()}});

1	var slider=$("#bxslider");slider.bxSlider({mode:slider.data("animation"),speed:slider.data("speed"),pager:slider.data("pager"),controls:slider.data("controls"),useCSS:!1,auto:slider.data("auto"),infiniteLoop:!0,onSlideAfter:function(){slider.startAuto()}});

custom.min.jsはjQueryを圧縮して記述しているため、上記のようになっています。

  var slider = $('#bxslider');
  slider.bxSlider({
      mode: slider.data('animation'),
      speed: slider.data('speed'),
      pager: slider.data('pager'),
      controls: slider.data('controls'),
      useCSS: false,
      auto: !0,
      infiniteLoop: !0,
      onSlideAfter: function() {
          slider.startAuto()
      }
  })

var slider = $('#bxslider');

slider.bxSlider({

mode: slider.data('animation'),

speed: slider.data('speed'),

pager: slider.data('pager'),

controls: slider.data('controls'),

useCSS: false,

auto: !0,

infiniteLoop: !0,

onSlideAfter: function() {

slider.startAuto()

}

})

上記は、圧縮前のjQueryです。jsフォルダ内のcustom.jsを参考ファイルとしてください。

bxSliderオプション randomStart使用例

  var slider = $('#bxslider');
  slider.bxSlider({
 　　　randomStart: true,
      mode: slider.data('animation'),
      speed: slider.data('speed'),
      pager: slider.data('pager'),
      controls: slider.data('controls'),
      useCSS: false,
      auto: !0,
      infiniteLoop: !0,
      onSlideAfter: function() {
          slider.startAuto()
      }
  })