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

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

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

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

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

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

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

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

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

キャッチコピーや装飾された画像を使用する場合、レスポンシブスライダー画像を有効化してください。

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

画像の設定

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

スライド画像は最大5枚まで設定できます。PCとスマホでは画面の横幅が異なるため、スライダー画像の内容によっては、PC用とスマホ用にそれぞれ画像を用意してください。

キャッチコピーや装飾された画像を使用する場合、レスポンシブスライダー画像を有効化してください。

スマホ用のスライダー画像は、「SP用スライダー画像」にアップロードしてください。SP用スライダー画像サイズは、スマホ画面の横幅を想定して設定してください。(画像サイズ例 横375px   高さ812px)

スマホ実機で、SP用スライダー画像の反映状況を確認できます。

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

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

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

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

スライダー画像の高さ

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

スライダー画像URL設定

スライダー画像ごとにリンクを設置する機能です。スライダー画像URL設定のチェックボックスをオン（有効）にしてから、スライダー画像URL設定［1］からスライダー画像URL設定［5］にURLを入力します。

［注意］この機能を使用する場合、「ボタンURL」と「ボタンテキスト」の設定および、パターンフィルターと背景色の透過率が無効になります。

スライダーの表示設定

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

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

スライダーの待機時間（初期値：3000)

画像スライダーのアニメーションスピード開始までの待機時間です。

スライダーの設定

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

コントロールの表示

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

ページャーの表示

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

配色の設定

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

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

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

パターンフィルター

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

背景色の透過率

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

スライダーセクションが表示されない