画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン

画像をポップアップ表示させるプラグイン

どうも、スマコマのコマ太郎です。元気もりもり

1つ前の記事「画像をクリックすると大きなサイズの画像を表示する設定」で、その設定方法を解説しました。

WordPress の基本機能で実現でき手軽なのですが、実は1つ大きな問題があります。

それはクリックして表示された画像の画面から戻ることが簡単にはできず、ブラウザの戻るボタンを押す必要があることです。さらに前のページに戻るとページの最初に戻ってしまうため、読み進めていた場所に戻る必要があります。

正直、あまり使えません。そこで活躍するのが画像をクリックすると画像をポップアップして表示して、さらに閉じるボタンも追加してくれるプラグインです。

画像がポップアップ表示されたページ

画像をポップアップ表示してくれるプラグイン

このプラグインを使うことで、拡大された画像をポップアップ表示させることができる上、ウィンドウに表示されている×ボタンをクリックすれば閉じることができ、元のページの読んでいた部分に戻ることができます。

画像を使って解説することが多いなら、ぜひ使いたいプラグインです。

画像をポップアップ表示してくれるEasy FancyBox

Easy FancyBox」プラグインを使うことで、画像の表示方法をカスタマイズすることができます。

Easy FancyBox

Easy FancyBox

人気のあるプラグインで、あなたも画像をクリックするとポップアップして大きな画像になるページを見たことがあると思いますが、たいていこの「Easy FancyBox」プラグインを使っています。

プラグインをインストールすれば、ほぼそのまま使えます。ただ1点注意が必要となるのが、GIF画像を使っているケースです。

デフォルトでは、GIF画像には反応しないので、設定を追加してあげる必要があります。その設定については後述します。

Easy FancyBox をインストールする

まずはプラグイン「Easy FancyBox」をインストールしてください。わざわざ説明する必要もないと思いますが、わからない場合はプラグイン名をコピーした上でこちらの記事をご覧ください。

あわせて読みたい記事
どうも、スマコマのコマ太郎です。 今回は WordPress のプラグインのインストール方法を解説しようと思います。 まあ、正直、あ...

Easy FancyBox の基本設定

「Easy FancyBox」の設定は、管理画面の [設定]-[メディア] に追加されます。

Media の設定

ポップアップさせるメディアタイプ

[Media] でポップアップさせるメディアタイプを選択します。通常は画像のみ(Images)で OK です。

Overlay(重ねがけ) の設定

オーバーレイの設定

[Overlay] でメディアを表示する際のオーバーレイの挙動設定を行います。ここもデフォルトのままで OK です。

Window の設定

ポップアップ画面のデザイン設定

[Window] でポップアップした画面のデザイン設定を行います。ここもデフォルトのままで OK です。

ポップアップ画面に×ボタンをつけるには、「Show the (X) close button」をオンにします。(デフォルトでオンです)

Miscellaneous(その他) の設定

さらに細かな設定を行える

[Miscellaneous] (その他)でさらに細かな設定を行えますが、ここもデフォルトのままで OK です。

Images の設定

gif を追加する

[Images] で対象となる画像の挙動、ギャラリーの設定を行うことができます。ここがポイントなのですが、GIF画像を使うなら上記画像の箇所(Autodetect)に .gif を追加してください。

これがないと、GIF画像をクリックしてもポップアップしてくれません。

あわせて読みたい記事
どうも、スマコマのコマ太郎です。 つい先ほど、WPプラグインである「Easy FancyBox」周りの設定で悩みましたので、記録がてら記事...

記事を投稿する際の画像設定

「Easy FancyBox」プラグインの設定が出来たら、次は投稿画面での画像の貼り方です。

画像をクリックすることで、大きな画像でポップアップさせる設定については、1つ前の記事で書いた操作と同じになります。

あわせて読みたい記事
クリックすると大きなサイズの画像を表示する
どうも、スマコマのコマ太郎です。 ウェブページを見ていて画像をクリックすると大きなサイズの画像が見られるページを見たことがありませんか?...

ポイントは、2つ。メディア(画像)を追加するとき、[リンク先] でメディアファイルにするという点と、大きな画像を用意しておくことです。

詳しくは上記の記事をご覧ください。

最後に

「Easy FancyBox」プラグインは、簡単にポップアップする画像にしてくれるので、とても重宝しています。

個人的には必須プラグインの1つになっています。

細かな設定がありますが、ほぼデフォルトで困ることはないはずです。

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

体験記事にリンクを自動挿入する

体験記に最適!記事内にリスト型リンクを自動で追加できるプラグイン

ウェブサイトの色(RGB値)をワンクリックで調べる無料ツール

WordPressのエディタだけバージョンアップ前に戻し、以前のビジュアルエディ...

リンク色を青、アンダーバー付きに変更する方法

余白をコントロールして分かりやすくする

文章と対応する画像が分かりにくかったのでCSSで余白を調整してみた

画像形式はどれがいいの?

ブログを作るなら知っておきたい画像ファイル形式の話(JPG、PNG、GIF)