【WordPress】画像をポップアップ表示してくれるプラグインEasy FancyBoxの設定方法

 

 

Easy FancyBox というプラグインを使って

ワードプレスサイトに設置した画像を、ポップアップ表示させる方法を解説します！

１．Easy FancyBoxを使ってできること

ワードプレスの投稿画面に「猫の画像」を設置したとします。

 

画像のリンク先をメディアファイルに設定しておくことで

訪問者がその画像をクリックした時に、大きなサイズの画像を表示させることができますが

初期設定だと、以下のように黒い画面の中に画像が表示されますよね。

 

このままでもいいんですが、画像だけが表示されている画面から

元の記事画面に戻るには、ブラウザバック(ブラウザの戻るボタン)を押す必要があるので

ユーザーからすると少しわかりにくく、少々不親切な感じもしてしまいます。

 

そこで Easy FancyBox プラグインを使用することで、元のページから移動することなく

このように画像をポップアップ表示することができるので、わかりやすくなるし、おしゃれですよね♪

さらに赤丸で囲んだ矢印の周辺をクリックする事で、いちいち画像を閉じることなく

同じページ内にある次の画像を表示させることができるという優れもの！

 

画像を閉じたい時は、右上の×ボタンをクリックしてもいいですし

画像の周囲のグレーの部分(オーバーレイ)をクリックしても閉じることができます。

 

その他にも色々機能を備えていますが

Easy FancyBox のメインとなる機能はこんな感じです。

 

 

２．Easy FancyBoxのインストール方法

Easy FancyBox はワードプレスの公式プラグインなので

管理画面の プラグイン → 新規追加 から追加することができます。

 

 

公式サイトから直接ダウンロードする方は、以下のリンクからどうぞ。

外部リンクEasy FancyBox ダウンロードページ

 

プラグインのインストール方法がわからない方は、以下のページを参照して下さい。

内部リンクWordPressにプラグインをインストールする2つの方法

 

３．Easy FancyBox の基本設定

Easy FancyBox の設定は、通常のワードプレスプラグインと違いメディアの設定画面から行います。

ワードプレスの管理画面から 設定 → メディア と進みましょう。

 

メディア設定画面を下にスクロールしていくとある、

FancyBox の文字の下からがこのプラグインの設定画面となります。

 

 

設定画面には英語ばかりが並んでいるので、しり込みしてしまうかもしれませんが

基本的にはどこもいじる必要はなくインストールしたままでもOK。

 

なんですが、

わー研。のように画像送りの矢印を表示させたい方は、一ヶ所だけ設定を変更しましょう。

 

設定するのは、画面をずーっと下にスクロールさせていくとある Gallery の項目。

 

Gallery のすぐ下にある Autogallery のボックスをクリックして

デフォルトの WordPress galleries only を All in one gallery に変更してから

変更を保存 ボタンをクリックするだけでOK。

 

４．画像がポップアップ表示されないときは？

 

記事内に設置した画像がポップアップされないときは

画像のリンク先 を メディアファイル に設定しましょう。

 

やり方は、画像を設置する時に、、

 

設置する画像を選択して、右下に表示されている リンク先 の項目で メディアファイル を選択して 投稿に挿入 するだけ。

 

Easy FancyBox の基本的な設定方法はこれで以上。

ここからはより細かく設定したい方のために、その他の設定項目の解説をしていきます。

５．Easy FancyBox の詳細な設定方法

More options と Make available と表示されている項目は、有料コンテンツとなります。

5-1 Media

ポップアップ表示させるメディアの項目を選択できます。

YouTubeみたいな動画やPDFなども、ポップアップ表示させることができます。

5-2 Overlay

オーバーレイ(画像の周りのグレーの部分)の設定項目です。

・ Show the overlay around content opened in FancyBox.
開いたコンテンツの周りにオーバーレイを表示させる

・Close FancyBox when overlay is clicked.
　オーバーレイがクリックされた時にコンテンツを閉じる

・Opacity
オーバーレイの不透明度を０～１の間で設定

・Color
オーバーレイの色をHTMLで入力

5-3 Window

開いたコンテンツのデザインと動作の設定項目。

・Appearance
外観の設定項目です

Show the (X) close button：閉じるボタンを表示

Background color：閉じるボタンのコンテンツの背景色

Text Color：閉じるボタンのテキストの色

Title Color：閉じるボタンのタイトルの色

Border Color：閉じるボタンのボーダーの色

Border radeus：閉じるボタンの半径(大きさ)

・Dimensions
表示されるコンテンツサイズ

幅と高さ：コンテンツのデフォルトサイズ

枠線：コンテンツの枠線

Margin：コンテンツのマージン(余白部分)

・Behavior
コンテンツの挙動

Center while scrolling：スクロール時に中央に揃える

Esc key stroke closes FancyBox：ESCキーを押すとコンテンツを閉じる

Scale large content down to fit in the browser viewport.：コンテンツが大きいサイズの時は、画面のサイズに合わせて表示

Opening speed：コンテンツを開く速度

Closing speed：コンテンツを閉じる速度

Include the Mousewheel：マウスホイールで画像を送る

5-4 Miscellaneous

その他の細かい設定項目です。

・Auto popup
ページ読み込み時の自動ポップアップ機能の設定項目。

・Browser & devise compatibility
ブラウザとデバイスの互換性の設定項目。

・Theme & plugins compatibility
テーマとプラグインの互換性の設定項目。

・Advanced 
有料版プラグインの設定項目

5-5 Images

画像の設定項目です。

・To make images open in an overlay～

Autodetect：ポップアップさせるコンテンツの拡張子

Apply to：適用先を選択

・Behavior
動作設定

Transition Out・Easing In：コンテンツを表示する動作を選択

Easing Out・Transition In：コンテンツが消える時の動作を選択

Transparency fade during elastic transition.：コンテンツが偏移する時に透明になるらしいが確認できず

Close FancyBox when content is clicked：コンテンツをクリックすると閉じるようになります

・Appearance 
画像の外観の設定

Show title. Fancybox～：画像タイトルの表示方法を選択

Allow title from thumbnail～：Alt属性に入力した画像タイトルを表示します

・Gallery    
画像ギャラリーの設定

Autogallery：表示するギャラリーを選択

Show the gallery navigation arrows：コンテンツ送りの矢印を表示する

Arrow key strokes browse the gallery：矢印で画像を送る

Make galleries cyclic～：ギャラリーをル―プ表示させる

Change speed・Fade speed：ギャラリー偏移の速度調整

Advanced：表示デザインを変更

さいごに

インストールするだけで画像などのコンテンツをポップアップ表示してくれる

便利プラグイン Easy FancyBox の設定方法と使い方を解説しました。

 

有料版を購入する事で、さらに細かく設定できるようになりますが

正直、無料版の機能だけで十分事足りるのではないかと思います。