Emanon Proは、ファーストビューに固定ページのリンクを3つ表示することができます。サイト訪問者にPRしたいサービスや記事コンテンツを固定ページにまとめ伝えることができます。

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

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

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

ページボックスセクション

ページボックスセクションの設定

固定ページの反映

ページボックスセクションに表示したい固定ページを3つ事前に作成します。「ページ選択」はプルダウンボタンになっており、公開状態にある固定ページが選択肢に表示されます。

ページ説明文には、固定ページの概要を入力するようにしてください。ページボックスの画像は、固定ページのアイキャッチ画像が使用されます。

画像をマウスオーバーでページ説明文表示

マウスオーバーでページ説明文表示

ページボックスの画像をマウスオーバーすると、ページ説明文がスライドインします。ページボックスをクリックすると、固定ページにページが移動します。

jQueryプラグイン「Mosaic」

ページボックスセクションには、「Mosaic」を使用しています。「Mosaic」は、画像のマウスオーバー時にエフェクト付きでキャプテンを表示できるjQueryプラグインです。

mosaic

http://buildinternet.com/project/mosaic/から「Mosaic」のプラグインをダウンロードすることができます。

「Mosaic」のオプション

アニメーションのスピードやキャプション位置などのオプション設定が可能です。オプション機能を使用する場合、emanon proのcustom.min.jsを編集します。

custom.min.jsは、emanon pro本体の libフォルダ > jsフォルダ内にあります。

custom.min.js 12行目

custom.min.jsはjQueryを圧縮して記述しているため、上記のようになっています。speed :50の数値を小さくすることで、マウスオーバー時のアニメーション動作が速くなります。

「Mosaic」のオプション一覧

Emanon Proでは、ページ説明文(キャプション)をfadeによるスライドインで表示するようあらかじめCSSで調整していますので、「speed」以外のオプション設定は意図した通りに反映されませんのでご注意ください。

「Mosaic」のデモは、公式サイトのデモからご覧いただけます。

スポンサーリンク