ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox

その他

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox

2021年12月8日

ワードプレスで画像をクリックしたらふわっと画像が拡大表示されるプラグイン[Easy FancyBox]について解説していきます。

このプラグインは非常に便利で、このサイトでも常時利用しています。

表示速度にも悪影響が無いと考えられるためオススメです。

Easy FancyBoxの動作

Easy FancyBoxがどのように動作するか具体的に見てみたいと思います。
Easy FancyBoxを使ってふわっと拡大される画像と、されない画像を用意してみました。

それぞれクリックして違いを見てみてください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxを使ってふわっと拡大される画像
ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
拡大されない画像
ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxの動作

拡大されて表示された画像は、左右上下の空いているグレーのスペースか、画像右上の✕をクリックすることで閉じることができます。

Easy FancyBoxのインストール方法

ここからは画像をクリックしたらふわっと画像が拡大表示されるワードプレスのプラグイン[Easy FancyBox]のインストール方法を解説していきます。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxのインストール方法

使っているワードプレスにログインし、画面右側にある[プラグイン]の欄から[新規追加]をクリックしてください。
[新規追加]をクリックすると、[プラグインを追加]という画面に移ります。その中の右側にある検索ウィンドウに[Easy FancyBox]と入力してください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxのインストール方法

検索結果が表示されたら、[Easy FancyBox]を見つけて[今すぐインストール]をクリックしてください。

類似している名前のプラグインも多数あります。画像や説明文もよく見比べてください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxのインストール方法

[今すぐインストール]をクリックすると、Easy FancyBoxのステータスが[インストール中]になります。
そのまま待っているとインストールが終わり、[有効化]というボタンを押せるようになります。
[有効化]というボタンを押せるようになりましたら、 [有効化] をクリックしてください。

ワードプレスはインストール後に有効化をすることでプラグインが機能するようになります。
インストール後は忘れずに[有効化]してください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxのインストール方法

[有効化] をクリックして有効化されると、画面が切り替わり、インストール済みプラグインにEasy FancyBoxが表示されていることを確認してください。
これでEasy FancyBoxのインストールは終了です。

Easy FancyBoxの使い方

Easy FancyBoxをインストールして有効化するだけでは画像をふわっと拡大させることはできません。
ここからは有効化後の使い方を解説します。

1枚の画像をふわっと拡大させる方法

Easy FancyBoxを使って1枚の画像をふわっと拡大させる方法を解説します。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
1枚の画像をふわっと拡大させる方法

編集画面からふわっと拡大させたい画像をクリックしてください。
画像をクリックしたら、編集画面の左上にあるリンクのアイコンをクリックしてください。
リンクのアイコンをクリックすると、下に向かってメニューが伸びます。その中から[メディアファイル]をクリックしてください。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
1枚の画像をふわっと拡大させる方法

[メディアファイル]をクリックすると、上記の画面のようになります。
この状態で初めて画像がふわっと拡大表示されるようになります。
過去の画像を全てこのように拡大したい場合は、画像1個1個に対してリンクのアイコンから[メディアファイル]を選択する必要があります。

ギャラリーの画像をふわっと拡大させる方法

Easy FancyBoxを使うと、ワードプレスの標準機能にあるギャラリーで作成した画像集もふわっと拡大表示させることが可能です。
ギャラリーの画像をふわっと拡大させる方法を詳しく解説します。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
ギャラリーの画像をふわっと拡大させる方法

ふわっと拡大表示させたいギャラリーを選択して、右側にある[リンク先]でメディアファイルを選択してください。
ギャラリーではこの1回の作業で全ての画像が個別にふわっと拡大表示されるようになります。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
ギャラリーの画像をふわっと拡大させる方法

1枚の画像をふわっと拡大表示させるときとの違いは、拡大された画像の右側に次の画像に移動するためのボタンが用意されていることと、左下に画像のキャプションに入っている文字が自動的に表示される点です。
画像のキャプションを適当につけてしまっている場合は、メディアファイルを編集する必要があるかもしれません。

Easy FancyBoxの設定

Easy FancyBoxは初期設定のままでも十分期待している動作をしてくれるプラグインです。
ここではそれ以外に最低限確認してほしい点のみを解説します。

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxの設定

Easy FancyBoxの設定を変更するには、ワードプレスの右側にある[設定]をクリックして、下に向かって展開されたメニューの中から[メディア]をクリックしてください。

拡大表示させるメディアの種類を選択する方法

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
拡大表示させるメディアの種類を選択する方法

Easy FancyBoxでは、画像の他にPDFやYouTube等といったメディアも拡大表示させることが可能です。
画像以外にも拡大表示させたいメディアがある場合はここにチェックを入れてください。

拡大表示させる拡張子を追加する方法

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
拡大表示させる拡張子を追加する方法

Easy FancyBoxの初期設定では、[.jpg .jpeg .png .webp]が画像の拡張子として設定されています。
gif等も追加したい場合はこの欄にカンマ区切りで追加してください。

Easy FancyBoxが正常に動作しない時に確認して欲しいこと

Easy FancyBoxを有効化しても画像がふわっと拡大されない場合は以下の2点を確認してください。

1.画像のリンク先が[メディア]になっているか

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxが正常に動作しない時に確認して欲しいこと

Easy FancyBoxを有効化しても画像がふわっと拡大されない場合はまず、画像のリンク先に[メディア]が正しく設定されているか確認してください。
1枚1枚この設定をしないといけないので漏れやすいところです。
※当ブログでも設定漏れで拡大させない画像がちらほらあるかもしれません。

2.画像の拡張子が拡大対象になっているか

ワードプレスで画像をクリックしたら拡大するプラグイン Easy FancyBox
Easy FancyBoxが正常に動作しない時に確認して欲しいこと

ふわっと拡大表示させたい画像の拡張子がEasy FancyBoxの対象になっているかを確認してください。

特に[gif]に関しては利用している人も多いと思いますが、初期設定で[gif]は拡大の対象になっていません。

その他ワードプレスのプラグインに関する記事

その他ワードプレスのプラグインに関する記事はこちです。是非ご覧ください。

BingのSEO対策 Bing URL Submissions Pluginを解説
ワードプレスで画像を一括でWebPに変換してくれるプラグイン EWWW Image Optimizer
ワードプレスで関連記事を自動で表示してくれるプラグイン YARPP

最後までご覧いただきありがとうございました。
情シスの自由帳は、情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。

Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
できる限り詳しく、丁寧に解説していくつもりですが、解説で不明な部分やもっと深く掘り下げたほうが良い記事がありましたら遠慮なくコメント欄でコメントいただけるとありがたいです。

操作環境
Windows11 Home
Microsoft Office 2019

-その他
-,