記事の中で使う画像を挿入したときに、
「思ってたより画像が小さいなぁ・・・それに見にくい。もうちょっと細部まで見てもらいたいのになぁ・・・」
なんてことを思ったことはありませんか？
そんなときに役立つのが、WordPressのプラグイン『Easy FancyBox』です。
画像をカチッとクリックするだけで、ボヨヨヨ～ン！と拡大表示されます。難しい設定もなく、インストールするだけなので、初心者でも簡単に使うことができます！
ボヨヨヨ～ン！っていったいどういうこと？？ ですよね。
下の画像をクリックしてみてください
画像が拡大表示されましたか？
このように、ボヨヨヨ～ン！ と画像が拡大されるので、小さな画像を大きく見せたいときや、細かいところを見せたいときに使えるいい奴なんです。拡大画像を閉じるときのシューッって吸い込まれる感じも面白いですよね。
Easy FancyBox のおすすめポイント！
インストールしてすぐに使える！
何も設定しなくてOK！ インストールをして有効化するだけで、すぐに使うことができます。
インストール方法
プラグイン ＞ 新規追加 をクリックします。
「プラグインの検索. . . 」に『Easy FancyBox』と入力すると検索がスタートします。プラグインが出てきたら、「今すぐインストール」をクリックするとインストールが始まります。
インストールが終わると、「今すぐインストール」の箇所が「有効化」に変わるので、そちらをクリックして有効化しましょう。
もうこれで使えるようになっています。簡単でしょ！
画像を挿入し、リンク先を設定するだけ！
いつも通りの操作方法だけで、拡大された画像を表示することができます。
画像の挿入方法(その１）
投稿の編集画面で「メディアを追加」をクリック。
挿入したい画像を選び、画面右下の「投稿に挿入」をクリック。
挿入された画像サイズは「フルサイズ」なのでサイズ変更を行います。
画像をクリックするとメニューが表示されます。「鉛筆（編集）」アイコンをクリックすると「画像詳細」ウィンドウが表示されるので、画像のサイズと、リンク先の設定をメディアファイルに変更します。最後に、右下の「更新」ボタンをクリックして終了です。
画像の挿入方法(その２)
「メディアを追加」画面の右下に「添付ファイルの表示設定」があります。こちらからもサイズやリンク先の変更ができます。
こちらで表示設定をして投稿に挿入した場合、次に挿入する画像にも同じ設定内容が引き継がれます。
こはるは、次に引き継がれるのが嫌なので、
一度挿入してから変更するようにしています。
拡大するとき、閉じるときの動きが面白い！
拡大時のボヨヨヨ～ン！っていう感じと、閉じる時のシューッ！て吸い込まれる動きが、面白くて、気持ちいい。何度もカチカチやりたくなりませんか？ こはるだけかなぁ・・・。
全てクリックで拡大できます
このボヨヨヨ～ン！っていう動きは「エフェクト」といいます。
「エフェクト」は設定で変更することが可能です。詳しくは、後ほど解説しますね。
拡大されて見える仕組み
クリックをして拡大表示された画像は、アップロードしたオリジナルサイズの画像です。
記事中で画像を使うときは、投稿ページの横幅に合わせたり、記事に合うサイズに設定をして、小さく見せています。クリックすることで、アップロードした本来の画像サイズで表示されるという仕組みになっているのです。
[adcohrd]ポップアップ機能で別ページへ移動しない！
この機能が一番のポイント！
記事中に挿入された画像が小さくて見にくいなぁ・・・って思うときは、その画像をクリックしますよね。
そして、クリックしてみると「あれれ、ページが移動しちゃった！ 元のページは・・・」
たいていの場合、画像をクリックすると画像だけが表示されるページに移動してしまいますよね。拡大された画像が表示され、見やすくなるのはいいんですが、元のページへは「戻る」ボタンを押すというアクションが発生し、ちょっと面倒ですよね。
でも、『Easy FancyBox』を使えば、同じページ上にポップアップ表示され、別ページへ移動することがないので、閲覧者のストレスの軽減にも繋がります。
既存の記事画像にも適用されるので安心！
ボヨヨヨ～ン！と表示させるときに、リンク先を「メディアファイル」に設定しましたよね。
すでに投稿した記事内において、画像のリンク先をメディアファイルに指定しているものについては、インストールするだけで、ボヨヨヨ～ンと拡大表示されるようになります。
初心者には安心です。
他にもできることをピックアップしています。お時間がある方は続きをどうぞ。
エフェクトの設定
Images Behavior で、ボヨヨヨ～ン！以外の設定ができます。
Transionの「In」が拡大時、「Out」が閉じる時の設定です。「Elastic」はボヨヨヨ～ン！です。「Elastic」以外に「Fade」の設定ができます。
Easingの「In」「Out」の設定は「Elastic」を選んでいる時のみ変更ができます。
画像以外のメディアもポップアップできる！
設定を変えるには、ダッシュボード ＞ 設定 ＞ メディア です。メディア設定の中に『Easy FancyBox』の設定機能が追加されています。
Media
ポップアップしたいメディアにチェックを入れて設定します。
| ファイル | 種類 |
| Image | 画像 |
| Inline content | 文章 |
| PDFファイル | |
| SWF | .swf形式のファイル |
| SVG | .svg形式のファイル |
| Youtube | Youtubeの動画 |
| Vimeo | Vimeoの動画 |
| Dailymotion | Dailymotionの動画 |
| iFrames | iframeを使用した文書 |
画像、動画、PDFについては、リンク先を「メディアファイル」にすることで拡大表示されます。
文章を拡大表示させるには、「Inline content」にチェックを入れ、次のコードをテキストに埋め込む必要があります。
<a href=”#ID-1” class=”fancybox-inline”>クリックする文字を入力</a>
<div class=”fancybox-hidden”><div id=”ID-1” > ここに表示させたい文章を入力 </div></div>
「ID-1」の部分は、自由につけることができます（英数字）。
実際の表示はこちらです
初心者の方へ
「ID-1」の部分を変更した場合は、＜a href =”＃○○“> <div id=”○○“> の ○○ は同じにしてくださいね。
<div id＞で「表示する文章」にIDを付けます。<a href>はリンク先を指定するもので、ここで先ほど<div id>で付けたIDを指定すれば、「クリックしたらこのIDへリンクしてね」と設定することができます。
画像周りの表示方法を変更する
Overlay
Show the overlay around content opened in FancyBox.
ポップアップされた画像の周りを透明化するかどうかを設定します。デフォルトはチェックありです。
チェックありとなしのイメージ
チェックを入れた場合、以下の設定ができます。
Opacity
透明度の設定。設定できる値は「0」から「1」までの間で、小数点単位で入力します。初期設定は「0.7」です。
Color
色の設定。3ケタのコードで入力します。初期設定は「#777」です。
画像を閉じるときの設定
Overlay
Close FancyBox when overlay is clicked.
「Show the overlay around content opened in FancyBox.」にチェックを入れて設定しているときに、半透明部分をクリックして画像を閉じる設定をします。
Window ＞ Appearnace
Show the (X) close button
画像の右上に表示させる「×」閉じるボタンを表示させるかどうかを設定します。デフォルトはチェックあり。
訪問者が迷わないように表示しておくほうがベストだと思います。
Window ＞ Behavior
Esc key stroke closes FancyBox
拡大した画像を閉じるときに、「ESC」キーを使えるかどうかを設定をします。デフォルトはチェックが入っています。
Images ＞ Behavior
Close FancyBox when content is clicked
ポップアップで表示された画像部分ををクリックしても、画像を閉じれるように設定をします。デフォルトはチェックなし。
これら全てにチェックを入れておくと、どこをクリックしても画像を閉じることができるようになります。
画像の枠やタイトルの色を変更する
Window で設定します。
Title color と Border Color
画像に表示する「タイトルの文字色」と「画像の枠色」の設定をします。３ケタの色コードで入力します。デフォルトは「#000(黒)」「#FFF(白)」に設定されています。
タイトルを「#060(緑)」、枠を「#E62(オレンジ)」に変更した例が下の画像です。
枠線の幅
画像の周りに表示される枠線の幅を設定します。「0」～「100」で設定ができます。デフォルトは「10」です。空欄にすると枠線は「10」の幅、「0」を入れると枠線なしになります。
枠線を「30」に設定した例
画像の表示に関する動きの設定
Window Behavior で設定します。
Center while scrolling
スクロールをしたときに、常に表示された画像が中央に表示されるかどうかの設定をします。タッチデバイス（スマホやタブレット）では無効になります。
Scale large content down to fit in the browser viewport
拡大表示された画像が、ブラウザーの画面内に収まるかどうかの設定をします。
理由がない限りチェックは入れておきましょう。その方が訪問者に対して親切ですよ～。
Opening speed と Closing speed
画像が拡大されるとき、閉じるときのスピードを設定します。デフォルトは「300」です。
数値が大きいほど、スピードが遅くなります。
まとめ
いかがでしたでしょうか？
初心者でもインストールするだけ、設定いらずで使えるっていうのが嬉しいプラグインです。
細かな設定をしていけば、自分らしいポップアップ表示を表現できるかもしれませんね。お試しくださいませ。