どうも、スマコマのコマ太郎です。
１つ前の記事「画像をクリックすると大きなサイズの画像を表示する設定」で、その設定方法を解説しました。
WordPress の基本機能で実現でき手軽なのですが、実は１つ大きな問題があります。
それはクリックして表示された画像の画面から戻ることが簡単にはできず、ブラウザの戻るボタンを押す必要があることです。さらに前のページに戻るとページの最初に戻ってしまうため、読み進めていた場所に戻る必要があります。
正直、あまり使えません。そこで活躍するのが画像をクリックすると画像をポップアップして表示して、さらに閉じるボタンも追加してくれるプラグインです。
画像がポップアップ表示されたページ
このプラグインを使うことで、拡大された画像をポップアップ表示させることができる上、ウィンドウに表示されている×ボタンをクリックすれば閉じることができ、元のページの読んでいた部分に戻ることができます。
画像を使って解説することが多いなら、ぜひ使いたいプラグインです。
もくじ
画像をポップアップ表示してくれるEasy FancyBox
「Easy FancyBox」プラグインを使うことで、画像の表示方法をカスタマイズすることができます。
Easy FancyBox
人気のあるプラグインで、あなたも画像をクリックするとポップアップして大きな画像になるページを見たことがあると思いますが、たいていこの「Easy FancyBox」プラグインを使っています。
プラグインをインストールすれば、ほぼそのまま使えます。ただ１点注意が必要となるのが、GIF画像を使っているケースです。
デフォルトでは、GIF画像には反応しないので、設定を追加してあげる必要があります。その設定については後述します。
Easy FancyBox をインストールする
まずはプラグイン「Easy FancyBox」をインストールしてください。わざわざ説明する必要もないと思いますが、わからない場合はプラグイン名をコピーした上でこちらの記事をご覧ください。
Easy FancyBox の基本設定
「Easy FancyBox」の設定は、管理画面の [設定]-[メディア] に追加されます。
Media の設定
[Media] でポップアップさせるメディアタイプを選択します。通常は画像のみ（Images）で OK です。
Overlay(重ねがけ) の設定
[Overlay] でメディアを表示する際のオーバーレイの挙動設定を行います。ここもデフォルトのままで OK です。
Window の設定
[Window] でポップアップした画面のデザイン設定を行います。ここもデフォルトのままで OK です。
ポップアップ画面に×ボタンをつけるには、「Show the (X) close button」をオンにします。（デフォルトでオンです）
Miscellaneous(その他) の設定
[Miscellaneous] (その他)でさらに細かな設定を行えますが、ここもデフォルトのままで OK です。
Images の設定
[Images] で対象となる画像の挙動、ギャラリーの設定を行うことができます。ここがポイントなのですが、GIF画像を使うなら上記画像の箇所（Autodetect）に .gif を追加してください。
これがないと、GIF画像をクリックしてもポップアップしてくれません。
記事を投稿する際の画像設定
「Easy FancyBox」プラグインの設定が出来たら、次は投稿画面での画像の貼り方です。
画像をクリックすることで、大きな画像でポップアップさせる設定については、１つ前の記事で書いた操作と同じになります。
ポイントは、２つ。メディア（画像）を追加するとき、[リンク先] でメディアファイルにするという点と、大きな画像を用意しておくことです。
詳しくは上記の記事をご覧ください。
最後に
「Easy FancyBox」プラグインは、簡単にポップアップする画像にしてくれるので、とても重宝しています。
個人的には必須プラグインの１つになっています。
細かな設定がありますが、ほぼデフォルトで困ることはないはずです。
↓↓
