Easy FancyBox 画像を大きく表示できるプラグイン 設定方法と使い方読み終わるまで 1 分

ワードプレス(WordPress)の投稿ページ内の画像を拡大表示できるプラグイン Easy FancyBox を解説します。

Easy FancyBoxで実現できること

Easy FancyBoxを使うと投稿ページや固定ページ内の画像をクリックすると同じ画面内に画像を大きくポップアップ表示できるようになります。

主に次のような特長と機能があります。

• 画像を大きくポップアップ表示できる
• 拡大表示させた画像を×ボタンで閉じることができる
• ギャラリー機能で複数の画像を並べて表示でき、拡大して順送りに表示できる

しかもインストールして有効化するだけでOKで、初期設定から変更する必要はありません。あるとすればポップアップで拡大表示された画像の下に代替テキストに入力した文字が表示されるので、その表示/非表示を設定するぐらいしか変更する箇所はありません。

Easy FancyBoxのインストール方法

Easy FancyBoxプラグインをWordpressにインストールする手順を解説します。

↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。

1. 検索ボックスに”Easy FancyBoxと入力すると下に検索結果が表示されます
2. ”Easy FancyBox”の今すぐインストール”ボタンをクリックします

↑Easy FancyBoxのインストールが完了すると有効化ボタンが表示されるのでクリックします。

これでEasy FancyBoxのインストールと有効化が完了しました。

Easy FancyBoxの使い方

Easy FancyBoxをインストールして有効化するだけで基本的にはOKです。

有料版にするとカスタマイズできる幅は広がりますが、無料版でも出来る箇所の設定を変更してもメリットがほとんど無いからです。

画像ファイルをポップアップ表示させる方法

新規に投稿ページに挿入する画像ファイルも、既に投稿ページ内に挿入された画像ファイルもEasy FancyBoxで画像を大きくポップアップ表示させる方法はリンク先をメディアファイルに変更するだけです。

• 新規挿入画像ファイル：メディアを追加の添付ファイルの表示設定のリンク先を「メディアファイル」に設定して投稿に挿入
• 既存画像ファイル：画像編集(画像詳細)の表示設定のリンク先を「メディアファイル」に設定して更新

特定の画像だけ拡大表示させたい場合は、後からポップアップ表示したい画像だけをメディアファイルに変更したほうが手間が省けます。

新規挿入画像ファイルを大きくポップアップ表示させる方法

↑画像を挿入すると表示される「メディアを追加」画面にある「添付ファイルの表示設定」の「リンク先」をメディアファイルに変更して、投稿に挿入ボタンをクリックします。

既存の画像ファイルを大きくポップアップ表示させる方法

1. 既に投稿ページ内に挿入されている画像を編集すると表示される「画像詳細」画面にある「リンク先」をメディアファイルに設定
2. 「更新」ボタンをクリックします

拡大ポップアップ表示のようす

↑このように拡大して画像が表示されます。画像内の下には代替テキストに入力された文字が表示されます。

Easy FancyBoxを無効化してリンク先をメディアファイルにしたときの画像のようす

もしEasy FancyBox導入しないか無効化した状態でリンク先をメディアファイルにした場合は画像は大きく表示されますが、端末の戻る操作でしか拡大画像を取り消して元の画面に戻ることはできません。

複数の画像(ギャラリー)を挿入する方法

Easy FancyBoxでは下記のように複数の画像を記事内に挿入して横並びに表示することができます。

↑これが実際にEasy FancyBoxのたギャラリー機能で挿入した画像です。

ギャラリーを作成する手順

投稿ページ編集画面のメディアを追加からギャラリーを設定します。

↑記事(投稿ページ)編集画面内の上部にあるメディアを追加ボタンをクリックします。

1. 「メディアを追加」内の左側にある「ギャラリーを作成」をクリック
2. 投稿ページ(記事)内に挿入する画像を複数選択
3. 「ギャラリーを作成」ボタンをクリック

1. 「リンク先」をメディアファイルに変更
2. 「カラム」は挿入する画像枚数に合わせて変更
3. 「サイズ」をフルサイズに変更 ※任意のサイズでOK
4. 「ギャラリーを挿入」ボタンをクリック

ギャラリーを表示したようす

ギャラリーを設定した後は記事のプレビューで確認します。

↑プレビューボタンをクリックします。
公開済みの既存記事の場合は変更をプレビューボタンをクリックします。

↑ギャラリーに3枚画像挿入した状態です。どれか1つの画像をクリックします。

↑ギャラリー設定した画像をクリックするとポップアップ表示され、矢印キーで次の画像を表示させることができます。

初期設定のままだと画像の下に代替テキストに入力した文字が表示されますが、上の写真はその機能をオフにしています。設定方法は後述します。

拡大画像の下の代替テキストの文字を非表示にする方法

Easy FancyBoxは初期設定から変更する箇所は殆どありませんが、唯一ひとつだけ設定を変更したほうが良い箇所があります。

それは画像をクリックして拡大表示した時に下に表示される文字を非表示にする設定です。

文字が表示されていると下の画像が見えにくいので文字を非表示にした方が良い場合も多いです。

Easy FancyBoxの設定画面

Easy FancyBoxの設定画面を表示させる方法は2つあります。

• インストール済みプラグイン一覧画面のEasy FancyBoxの「設定」から
• メディア設定から

メディア設定内にあるFancyBoxの設定項目

メディア設定の画面内に下のほうに表示されているFancyBoxの画像の外観の項目にある次の☑を外してオフにします。

1. 「タイトルを表示」のチェックボックス内の☑を外してオフにします
2. 「変更を保存」ボタンをクリックします。

以上で拡大画像の下に表示される文字を非表示にする設定は完了です。

まとめ

Easy FancyBoxを導入するメリットは画像を拡大してポップアップ表示できることと、×ボタンで簡単に表示画像を閉じることが出来る点にあります。

注意点としては元々ある画像の解像度サイズが小さい場合は画像を拡大表示させても小さく表示される点です。とくにPCの利用者にとっては拡大した画像と元の画像との差がほとんど無いこともあります。

スマホだと2本の指でタッチパネルをつまむように操作(ピンチ)することで画面を拡大できるのでそもそもEasy FancyBoxを導入して記事の画像を拡大表示させる意味がありません。
複数枚の画像を順送りに出来るギャラリー機能しか実質意味をなしません。

とはいえ、ブログ・サイトの用途によっては使い道はあります。
高解像度写真を載せたり画像の細かい部分をPCの利用者に確認してもらいたい場合などです。

アップデート(更新)もされているのでセキュリティの面でも安心して使うことができます。
入れておいてもとくにデメリットは無いので導入を検討してみてはいかがでしょうか。