【初心者向け】Easy FancyBoxの使い方｜WordPressで画像を拡大表示させる最短ルート

Easy FancyBoxとは

「Easy FancyBox」は、WordPressのサイト上で画像や動画、PDFなどをポップアップで表示するためのプラグインです。いわゆる「ライトボックス」機能を提供し、ユーザーに視覚的に魅力的な体験を提供します。

主な特徴は以下の通りです。

• 自動ライトボックス化: 記事やギャラリー内の画像、動画、PDFなど、リンクされたメディアを自動的にライトボックス表示（ポップアップ表示）します。
• 多様なメディア対応: 画像だけでなく、YouTubeやVimeoなどの動画、PDFファイル、Google Map、外部サイトなどもポップアップ表示できます。
• 視覚的な効果: 画像をクリックすると、背景が暗くなり、画像が中央に大きく「ふわっと」浮かび上がるような演出が可能です。これにより、コンテンツが強調され、見栄えが良くなります。
• 簡単な操作: HTMLやJavaScriptの知識がなくても、プラグインを導入・設定するだけで簡単に利用できます。
• ギャラリー機能との連携: WordPressの標準ギャラリー機能と連携し、複数の画像をまとめてスライドショー形式で表示することも可能です。
• カスタマイズ性: ポップアップ表示時の枠線、余白、閉じるボタン、背景の透明度や色など、詳細な設定が可能です。

もともと「Easy FancyBox」という名称でしたが、現在は「Firelight Lightbox」という名称に変わっており、WordPressのプラグインディレクトリでもこの名前で提供されています。無料で利用できる機能に加え、より多くのカスタマイズオプションや高度な機能を提供する有料版（Pro版）も存在します。

写真ギャラリーや作品ギャラリー、商品ギャラリーなど、画像を魅力的に見せたい場合に特に役立つプラグインです。

利用数

WordPressプラグイン「Easy FancyBox」は、現在200,000以上の有効インストール数があることが確認できます。

• なお、このプラグインは現在「Firelight Lightbox」という名前に変更されていますが、プラグインディレクトリ内では引き続き「Easy FancyBox」という名前でも検索可能です。
• 以前の情報では、300,000以上という有効インストール数が示されていた時期もあります。

利用料

WordPressプラグインのEasy FancyBoxの基本機能は、無料で利用できます。

ただし、より高度な機能や設定が必要な場合は、Easy FancyBox Proという有料のアドオン（拡張機能）が提供されている可能性があります。

正確な利用料（Pro版の価格など）については、提供元の公式サイトで最新の情報を確認することをおすすめします。

Easy FancyBoxの使い方

WordPressプラグインの「Easy FancyBox」（現在は「Firelight Lightbox」に名称変更されているようです）は、ウェブサイト上の画像や動画、PDFなどをクリックした際に、ページを離れることなくポップアップ表示（Lightbox表示）させるための便利なツールです。

基本的な使い方と設定方法を以下にまとめます。

1. Easy FancyBoxのインストールと有効化

1. WordPress管理画面にログインします。
2. 「プラグイン」>「新規追加」 に移動します。
3. 検索ボックスに「Easy FancyBox」または「Firelight Lightbox」と入力して検索します。
4. 検索結果に表示されたプラグインを「今すぐインストール」し、その後「有効化」をクリックします。

これで基本的な機能が有効になります。特に設定を変更しなくても、画像リンクが自動的にポップアップ表示されるようになります。

2. 画像のポップアップ表示方法

Easy FancyBoxで画像がポップアップ表示されるようにするには、画像挿入時のリンク設定が重要です。

1. 投稿または固定ページの編集画面を開きます。
2. 画像を挿入したい場所にカーソルを合わせ、「メディアを追加」ボタンをクリックします。
3. メディアライブラリからポップアップ表示させたい画像を選択するか、新しく画像をアップロードします。
4. 右側の「添付ファイルの表示設定」セクションで、「リンク先」を「メディアファイル」に設定します。
   • 重要: ここが「なし」や「カスタムURL」になっていると、ポップアップ表示されない場合があります。
5. 「投稿に挿入」ボタンをクリックします。

これで、挿入された画像をクリックすると、Lightbox形式で画像がポップアップ表示されるようになります。

3. ギャラリーのポップアップ表示方法

WordPressの標準ギャラリー機能もEasy FancyBoxに対応しています。

1. 投稿または固定ページの編集画面で「メディアを追加」をクリックします。
2. 左側のメニューから「ギャラリーを作成」を選択します。
3. ギャラリーに含めたい画像を複数選択し、「新しいギャラリーを作成」をクリックします。
4. 「ギャラリーを編集」画面で、「リンク先」を「メディアファイル」に設定します。
5. 必要に応じてカラム数やサイズを調整し、「ギャラリーを挿入」をクリックします。

これで、ギャラリー内の画像をクリックすると、ポップアップ表示され、左右の矢印で画像をスライドできるようになります。

4. その他のコンテンツ（動画、PDFなど）のポップアップ表示

Easy FancyBoxは画像だけでなく、YouTubeやVimeoなどの動画、PDFファイルなどもポップアップ表示させることができます。

基本的な流れは画像と同様ですが、それぞれ特定のクラスをリンクに追加したり、設定で有効にする必要があります。

• 動画（YouTube、Vimeoなど）:
  • 通常、動画のURLをリンクとして挿入すると自動検出されますが、うまくいかない場合は、リンクに class="fancybox-youtube" や class="fancybox-vimeo" のようなクラスを追加します。
• PDF:
  • 「設定」>「メディア」のFancyBox設定で「PDF」オプションを有効にし、PDFファイルへのリンクを挿入します。
• iframe（外部サイト、Googleマップなど）:
  • 「設定」>「メディア」のFancyBox設定で「iFrame」オプションを有効にし、リンクに class="fancybox-iframe" のようなクラスを追加します。

5. Easy FancyBoxの設定項目（詳細）

Easy FancyBox（Firelight Lightbox）の各種設定は、WordPress管理画面の「設定」>「メディア」内にある「FancyBox」セクションから行えます。（プラグインのバージョンによっては「Lightbox」という独立したメニューになっている場合もあります。）

主な設定項目には以下のようなものがあります。

• FancyBox Classic: Enable: どのタイプのコンテンツをFancyBoxで表示するか（画像、動画、PDFなど）を選択します。
• FancyBox Classic: Window Appearance: ポップアップ表示された際のウィンドウの外観（背景の透明度、ボーダー、角丸など）を設定します。
• FancyBox Classic: Behavior: ポップアップの動作（自動スライドショー、ループ再生、閉じるボタンの表示など）を設定します。
• FancyBox Classic: Effect: ポップアップ表示時のアニメーション効果（フェード、伸縮など）を設定します。
• 自動検出対象のファイル形式: デフォルトではjpg, jpeg, png, webp, gifなどが設定されていますが、必要に応じて追加できます。

これらの設定は、好みに応じてカスタマイズできます。

トラブルシューティングのヒント

• ポップアップ表示されない場合:
  • 最も多い原因は、画像リンクの「リンク先」が「メディアファイル」になっていないことです。確認してください。
  • 他のプラグインとの競合が考えられます。一時的に他のプラグインを無効にして、FancyBoxが動作するか確認してください。
  • テーマとの競合も考えられます。一時的にWordPressのデフォルトテーマ（Twenty Twenty-Fourなど）に切り替えて、動作するか確認してください。
  • キャッシュプラグインを使用している場合は、キャッシュをクリアしてみてください。
• FancyBox Classic の設定が表示されない場合:
  • プラグインが正しく有効化されているか確認してください。
  • WordPressのバージョンや他のプラグインとの組み合わせによって、メニューの表示場所が異なる場合があります。「設定」メニュー内や「外観」メニュー内などを確認してみてください。

Easy FancyBoxは直感的に使えるプラグインなので、上記の基本的な使い方を参考に、ぜひ試してみてください。

Easy FancyBoxの注意点

「Easy FancyBox」は、画像などをクリックしたときにLightbox形式で拡大表示させる便利なプラグインですが、いくつか注意点があります。

1. リンク先の「メディアファイル」設定

Easy FancyBoxを機能させるには、WordPressの投稿やページに画像を挿入する際に、「リンク先」を「メディアファイル」に設定する必要があります。ここが「カスタムURL」や「なし」などになっていると、FancyBoxが作動せず、単に画像ファイルが開いたり、リンク先のページに飛んでしまったりします。

2. 他のプラグインとの競合

特に、キャッシュ系プラグインやJavaScriptを圧縮するプラグインなど、Webサイトの表示速度を最適化するプラグインとの相性が悪い場合があります。これらのプラグインがEasy FancyBoxのJavaScriptの読み込みを妨げ、正常に動作しないことがあります。問題が発生した場合は、他のプラグインを一時的に無効にして、競合しているものを特定する必要があります。

3. セキュリティの脆弱性

過去に、FancyBoxのJavaScriptライブラリを利用している複数のWordPressプラグイン（Easy FancyBoxを含む）で、Stored Cross-Site Scripting (XSS) の脆弱性が報告されています（CVE-2024-5020など）。これは、認証された攻撃者が悪意のあるスクリプトを注入できる可能性があり、データ窃盗やセッションハイジャックなどにつながる可能性があります。

対策として、Easy FancyBoxは常に最新バージョンにアップデートしておくことが非常に重要です。 脆弱性が修正されたバージョンがリリースされている場合は、速やかに更新するようにしましょう。

4. パフォーマンスへの影響

一般的に、Easy FancyBoxは軽量なプラグインとされており、サイトの速度に大きな影響を与えることは少ないとされています。しかし、サイトに多数の画像があり、多くのFancyBoxが使用されている場合や、他の重いプラグインと併用している場合は、表示速度にわずかな影響が出る可能性も考えられます。

5. テーマとの互換性

ほとんどのWordPressテーマと問題なく動作するとされていますが、稀に特定のテーマと競合する場合があります。もしFancyBoxが期待通りに動作しない場合は、一時的にデフォルトのテーマに切り替えてみて、テーマとの互換性の問題かを確認すると良いでしょう。

6. 設定の確認

Easy FancyBoxにはいくつかの設定項目があります。画像だけでなく、PDFや動画など、他のメディアファイルにもFancyBoxを適用したい場合は、設定画面で適切に有効化されているか確認が必要です。また、拡大表示された際の背景の不透明度や、表示されるキャプションの有無なども設定できますので、好みに合わせて調整しましょう。

まとめ

Easy FancyBoxは非常に便利で広く使われているプラグインですが、特に画像のリンク先設定、他のプラグインとの競合、そしてセキュリティアップデートには注意が必要です。これらの点に留意して使用することで、サイトのユーザビリティを向上させることができます。

口コミ・評価

ポジティブな点

• 手軽さ・シンプルさ: インストールして有効化するだけで、画像などがポップアップ表示（ライトボックス効果）されるようになり、設定が非常に簡単で使いやすいと評価されています。
• 初心者にもおすすめ: プログラミングの知識がなくても導入できるため、WordPress初心者にも推奨されています。
• 画像表示の向上: 画像をふわっと大きく見せる効果があり、サイトのユーザビリティ向上に役立つとされています。
• 対応ファイル: 画像だけでなく、動画やPDFなどのファイルを美しくポップアップ表示できる点も利点として挙げられています。

ネガティブな点や懸念点

• 動画ファイルのポップアップ（ライトボックス）: デフォルト設定では動画ファイルがポップアップしない、または設定項目がない、という不満が一部で挙げられています。
• 最近のバージョンの変更:
  • 設定画面が「メディア」から専用のコーナーに移動したこと。
  • 設定画面のデザインが以前に比べて見づらいと感じるユーザーがいるようです。

総じて、簡単にライトボックス効果を導入できるという点で長く利用され、評価されてきたプラグインですが、最近のバージョンアップでの設定画面の変更や特定の機能（動画など）の扱いに不満を持つユーザーもいるようです。

利用を検討されている場合は、ご自身のサイトで実現したい機能（特に動画のポップアップなど）が問題なく動作するかどうか、試してみることをおすすめします。

Easy FancyBoxの代替え

Easy FancyBoxと同様の機能を持つ、人気のある代替プラグインにはいくつか候補があります。

おすすめの代替プラグイン

• Simple Lightbox
  • 特徴: 非常にシンプルで軽量です。設定が簡単で、多くの画像リンクに自動的にライトボックス効果を適用できます。
• WP Featherlight
  • 特徴: Featherlightという軽量なJavaScriptライブラリを使用しており、非常にミニマルで高速です。設定項目がほとんどなく、手軽に使いたい場合に適しています。
• Responsive Lightbox & Gallery by dFactory
  • 特徴: 複数のライトボックススクリプト（FancyBox、SwipeBox、Nivo Lightboxなど）から選べ、設定オプションが豊富です。ギャラリー機能も統合されています。