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

その他

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

2021年12月8日

ここでは、Easy Fancyboxという画像をクリックすると拡大表示させるためのワードプレスのプラグインの機能と使い方をご紹介します。

このプラグインは日本語にも対応しており、デザインにも悪影響なく、表示速度も遅延させることもないことからこのサイトでも常時利用しています。

記事の中に画像を多く使うワードプレスメディアにはとってもオススメのプラグインです。

Easy Fancyboxは有効インストール数300,000以上、レビューでもほとんどが★5のとっても評価が高いプラグインです。

もっと詳しい内容についてはこちらの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をインストールして有効化するだけでは画像をふわっと拡大させることはできません。
ここからは有効化後の使い方を解説します。

クリックした画像をふわっと拡大させる方法

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

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

編集画面からふわっと拡大させたい画像をクリックしてください。

画像をクリックしたら、編集画面の左上にあるリンクのアイコンをクリックしてください。

リンクのアイコンをクリックすると、下に向かってメニューが伸びます。

その中から[メディアファイル]をクリックしてください。

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

[メディアファイル]をクリックすると、上記の画面のようになります。

この状態で初めて画像がふわっと拡大表示されるようになります。

過去の画像を全てこのように拡大したい場合は、画像1個1個に対してリンクのアイコンから[メディアファイル]を選択する必要があります。

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

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

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

拡大表示させたいギャラリーを選択して、右側にある[リンク先]でメディアファイルを選択してください。

ギャラリーではこの1回の作業で全ての画像が個別にふわっと拡大表示されるようになります。

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

1枚の画像をふわっと拡大表示させるときとの違いは、拡大された画像の右側に次の画像に移動するためのボタンが用意されていることと、左下に画像のキャプションに入っている文字が自動的に表示される点です。

画像のキャプションを適当につけてしまっている場合は、メディアファイルを編集する必要があります。

Easy FancyBoxの設定方法

Easy FancyBoxは初期設定のままでも十分期待している動作をしてくれるプラグインです。

ここではそれ以外に最低限確認してほしい点のみを解説します。

Easy FancyBoxの設定方法
Easy FancyBoxの設定方法

Easy FancyBoxの設定を変更するには、ワードプレスの右側にある[設定]をクリックすると下に向かって展開されます。

展開されたメニューの中から[メディア]をクリックしてください。

拡大表示させるメディアの種類(画像やYoutubeなど)を選択する方法

拡大表示させるメディアの種類(画像やYoutubeなど)を選択する方法
拡大表示させるメディアの種類(画像やYoutubeなど)を選択する方法

Easy FancyBoxでは、画像の他にPDFやYouTube等といったメディアも拡大表示させることが可能です。

画像以外にも拡大表示させたいメディアがある場合はここでチェックを入れてください。

拡大表示させるファイルの拡張子を追加する方法

拡大表示させるファイルの拡張子を追加する方法
拡大表示させるファイルの拡張子を追加する方法

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

-その他
-,