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

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

スライダーセクション

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

WordPress管理画面 > 外観 > カスタマイズ > フロントページ設定 > ファーストビューレイアウト設定をクリックし、「スライダーセクション」をチェックしてから、以下の設定を行ってください。

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

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

WordPress管理画面 > 外観 > カスタマイズ > フロントページ設定 > おすすめ記事セクションをクリックすると、下記画面が表示されます。

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

画像の設定

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

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

スライドに登録できる画像は最大5枚です。画像サイズは、1920px 500pxを推奨しています。

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

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

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

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

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

スライダー画像の高さ

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

スライダーの表示設定

スライダーの表示設定

スライド画とテキストの表示に関する設定を行います。

スライダー画像の速度(初期値:4000)

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

スライダーの設定

スライダーの設定では、お好みに合わせて「フェード」か「スライド」をお選びください。

スライドの自動スタート

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

コントロールの表示

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

ページャーの表示

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

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

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

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

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

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

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

配色の設定

配色の設定

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

背景カラーフィルターと背景色の透過率

スライド画像の色味を調整したい場合、背景カラーフィルターにお好みの色を設定します。

次に、背景色の透過率ボタンを左右に動かしながら、スライド画像の色味を調整していきます。背景色の透過率を右端に設定すると、背景カラーフィルターが100%表示、つまりスライド画像が一切見えなくなります。

パターンフィルター

スライド画像に、ドット柄かチェック柄を乗せることができます。

jQueryプラグイン「bxSlider」

Emanon Proは、スライド画像に「bxSlider」を使用しています。http://bxslider.com/からプラグインをダウンロードすることができます。

bxslider

「bxSlider」のオプション

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

custom.min.js 6行目

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

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

bxSliderオプション randomStart使用例

例えば、スライド開始の画像をランダムにピックアップしたい場合、custom.min.jsにrandomStart: trueを付け加えます。

jQuery圧縮版 randomStart使用例

bxSliderのオプション詳細は公式サイトでご確認ください。

jQueryプラグイン「FlexSlider」

Emanon Proのテキストスライダーには、「FlexSlider」を使用しています。

flexslider

「FlexSlider」のオプション詳細は、公式サイトでご確認ください。

スポンサーリンク