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

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

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

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

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

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

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

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

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

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

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

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

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

Easy FancyBox

Easy FancyBox

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

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

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

Easy FancyBox をインストールする

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

あわせて読みたい記事
WordPressにプラグインをインストールする方法として3つありますが、この記事ではもっとも簡単に出来る方法をご紹介します。...

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画像をクリックしてもポップアップしてくれません。

あわせて読みたい記事
Easy FancyBoxプラグインを使うと埋め込んだメディア画像の表示を加工できるのですが、一部機能しない画像があったので記事にしま...

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

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

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

あわせて読みたい記事
クリックすると大きなサイズの画像を表示する
ウェブページの中には画像をクリックすると大きなサイズの画像を見ることができます。このサイトでも設定していますが、WordPress な...

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

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

最後に

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

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

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

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

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

関連記事

Page Builder by SiteOrigin の基本的な使い方

ユーザー名を偽装する

WordPressのログイン ユーザー名をセキュリティ向上のため隠すには?

「次のページ」ボタンを追加

WordPressの記事投稿画面に「次の記事」ボタンを追加するプラグイン

サイドバーをカスタマイズする

トップページ、カテゴリー、投稿(記事)ページでサイドバーを変えたい

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

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

All In One WP Security

Securityプラグインを入れてセキュリティ対策(初心者向け)