ワードプレスで画像をクリックしたらふわっと画像が拡大表示されるプラグイン[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では、画像の他にPDFやYouTube等といったメディアも拡大表示させることが可能です。
画像以外にも拡大表示させたいメディアがある場合はここにチェックを入れてください。
拡大表示させる拡張子を追加する方法
Easy FancyBoxの初期設定では、[.jpg .jpeg .png .webp]が画像の拡張子として設定されています。
gif等も追加したい場合はこの欄にカンマ区切りで追加してください。
Easy FancyBoxが正常に動作しない時に確認して欲しいこと
Easy FancyBoxを有効化しても画像がふわっと拡大されない場合は以下の２点を確認してください。
１．画像のリンク先が[メディア]になっているか
Easy FancyBoxを有効化しても画像がふわっと拡大されない場合はまず、画像のリンク先に[メディア]が正しく設定されているか確認してください。
１枚１枚この設定をしないといけないので漏れやすいところです。
※当ブログでも設定漏れで拡大させない画像がちらほらあるかもしれません。
２．画像の拡張子が拡大対象になっているか
ふわっと拡大表示させたい画像の拡張子がEasy FancyBoxの対象になっているかを確認してください。
特に[gif]に関しては利用している人も多いと思いますが、初期設定で[gif]は拡大の対象になっていません。
その他ワードプレスのプラグインに関する記事
その他ワードプレスのプラグインに関する記事はこちです。是非ご覧ください。
最後までご覧いただきありがとうございました。
情シスの自由帳は、情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。
Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。
できる限り詳しく、丁寧に解説していくつもりですが、解説で不明な部分やもっと深く掘り下げたほうが良い記事がありましたら遠慮なくコメント欄でコメントいただけるとありがたいです。
操作環境
Windows11 Home
Microsoft Office 2019
