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

 

わかば
ワードプレスの記事に設置した画像を
わー研。みたくポップアップ表示にしたいんですけど
上手くいかないんです...

山本
それなら「Easy FancyBox」ってプラグインを
インストールするだけで簡単に設定できるよ!

わかば
ホントですか!?
じゃあそれ教えてください!!

山本
りょうかいだよー!

 

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

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

1.Easy FancyBoxを使ってできること

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

 

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

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

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

ネコの画像サンプル

 

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

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

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

 

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

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

Easy FancyBoxプラグインを使用して画像を表示した例

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

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

 

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

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

 

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

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

 

わかば
そうそう!こんな感じにしたかったんです♪

山本
じゃあ次から使い方を説明していくよー

 

2.Easy FancyBoxのインストール方法

Easy FancyBox公式サイト画像

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

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

 

Easy FancyBoxプラグイン画面

 

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

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

 

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

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

 

3.Easy FancyBox の基本設定

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

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

 

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

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

Easy FancyBoxの設定画面

 

わかば
英語ばっかりで、ちょっとわかりにくいですねぇ...

山本
そうだよね。
でも基本的にはそのまま使っても問題ないよ

 

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

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

 

なんですが、

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

 

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

 

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

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

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

Easy FancyBoxの設定項目は1つだけ

山本
これだけで画像を送る矢印が表示されるようになります

わかば
やったー!!

 

4.画像がポップアップ表示されないときは?

わかば
あれっ??
ちゃんと設定したはずなのに
画像をクリックしても何も起きません...

山本
それは画像のリンク先をメディアファイルにしてないからだよね

 

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

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

 

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

メディアを追加ボタンをクリック

 

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

リンク先をメディアファイルに設定

わかば
ホントだ!
画像がポップアップするようになりました!

 

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

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

5.Easy FancyBox の詳細な設定方法

山本
ここからは設定項目を1つずつ解説していきます

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

5-1 Media

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

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

Easy FancyBoxのMedia設定

5-2 Overlay

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

Easy FancyBoxのOverlay設定

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

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

・Opacity
オーバーレイの不透明度を0~1の間で設定

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

5-3 Window

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

Easy FancyBoxの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

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

Easy FancyBoxのMiscellaneous設定

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

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

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

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

5-5 Images

画像の設定項目です。

Easy FancyBoxの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 の設定方法と使い方を解説しました。

 

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

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

 

わかば
直感的に操作できるからわかりやすいと思います

山本
ブラウザバックだとちょっと使いにくいよね

 

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事