ワードプレス(WordPress)の投稿ページ内の画像を拡大表示できるプラグイン Easy FancyBox を解説します。
- Easy FancyBoxのインストールと設定がわかります
- 拡大画像の下に表示される代替テキストを非表示にする方法がわかります
Easy FancyBoxで実現できること
Easy FancyBoxを使うと投稿ページや固定ページ内の画像をクリックすると同じ画面内に画像を大きくポップアップ表示できるようになります。
主に次のような特長と機能があります。
- 画像を大きくポップアップ表示できる
- 拡大表示させた画像を×ボタンで閉じることができる
- ギャラリー機能で複数の画像を並べて表示でき、拡大して順送りに表示できる
しかもインストールして有効化するだけでOKで、初期設定から変更する必要はありません。あるとすればポップアップで拡大表示された画像の下に代替テキストに入力した文字が表示されるので、その表示/非表示を設定するぐらいしか変更する箇所はありません。
Easy FancyBoxのインストール方法
Easy FancyBoxプラグインをWordpressにインストールする手順を解説します。
WordPressのダッシュボード(管理者画面)のプラグインの新規追加を選択します↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。
プラグインを追加画面の検索ボックスに「Easy FancyBox」と入力して検索結果を表示させます- 検索ボックスに”Easy FancyBoxと入力すると下に検索結果が表示されます
- ”Easy FancyBox”の今すぐインストール”ボタンをクリックします
「インストール中」と表示されます
Easy FancyBoxのインストールが完了すると「有効化」と表示されるのでクリックします↑Easy FancyBoxのインストールが完了すると有効化ボタンが表示されるのでクリックします。
これでEasy FancyBoxのインストールと有効化が完了しました。
Easy FancyBoxの使い方
Easy FancyBoxをインストールして有効化するだけで基本的にはOKです。
有料版にするとカスタマイズできる幅は広がりますが、無料版でも出来る箇所の設定を変更してもメリットがほとんど無いからです。
画像ファイルをポップアップ表示させる方法
新規に投稿ページに挿入する画像ファイルも、既に投稿ページ内に挿入された画像ファイルもEasy FancyBoxで画像を大きくポップアップ表示させる方法はリンク先をメディアファイルに変更するだけです。
- 新規挿入画像ファイル：メディアを追加の添付ファイルの表示設定のリンク先を「メディアファイル」に設定して投稿に挿入
- 既存画像ファイル：画像編集(画像詳細)の表示設定のリンク先を「メディアファイル」に設定して更新
特定の画像だけ拡大表示させたい場合は、後からポップアップ表示したい画像だけをメディアファイルに変更したほうが手間が省けます。
投稿ページ(記事)に画像ファイルを挿入する時のリンク先の初期設定は前回に設定した情報を保持しているので、一度でも「メディアファイル」にすると、それ以降に挿入する画像ファイルのリンク先の設定は「メディアファイル」になります。なので拡大表示させたくない場合はその都度リンク先の設定を変更する必要があります
新規挿入画像ファイルを大きくポップアップ表示させる方法
新規に画像ファイルを挿入する時に表示される「メディアを追加」画面↑画像を挿入すると表示される「メディアを追加」画面にある「添付ファイルの表示設定」の「リンク先」をメディアファイルに変更して、投稿に挿入ボタンをクリックします。
既存の画像ファイルを大きくポップアップ表示させる方法
既存の画像ファイルを編集する時に表示される「画像詳細」画面- 既に投稿ページ内に挿入されている画像を編集すると表示される「画像詳細」画面にある「リンク先」をメディアファイルに設定
- 「更新」ボタンをクリックします
拡大ポップアップ表示のようす
投稿ページ内の画像のリンク先を「メディアファイル」に設定すると画像をクリックできるようになる
Easy FancyBoxで拡大ポップアップ表示された画像↑このように拡大して画像が表示されます。画像内の下には代替テキストに入力された文字が表示されます。
Easy FancyBoxを無効化してリンク先をメディアファイルにしたときの画像のようす
もしEasy FancyBox導入しないか無効化した状態でリンク先をメディアファイルにした場合は画像は大きく表示されますが、端末の戻る操作でしか拡大画像を取り消して元の画面に戻ることはできません。
Easy FancyBoxを導入しない、または無効化した状態でリンク先を「メディアファイル」にした場合の拡大画像複数の画像(ギャラリー)を挿入する方法
Easy FancyBoxでは下記のように複数の画像を記事内に挿入して横並びに表示することができます。
-
- Easy FancyBoxの設定画面その1
-
- Easy FancyBoxの設定画面その2
-
- Easy FancyBoxの設定画面その3
↑これが実際にEasy FancyBoxのたギャラリー機能で挿入した画像です。
ギャラリーを作成する手順
投稿ページ編集画面のメディアを追加からギャラリーを設定します。
投稿ページ編集画面↑記事(投稿ページ)編集画面内の上部にあるメディアを追加ボタンをクリックします。
「メディアを追加」内の「ギャラリーを作成」を選択した状態の画面- 「メディアを追加」内の左側にある「ギャラリーを作成」をクリック
- 投稿ページ(記事)内に挿入する画像を複数選択
- 「ギャラリーを作成」ボタンをクリック
「ギャラリーを編集」画面- 「リンク先」をメディアファイルに変更
- 「カラム」は挿入する画像枚数に合わせて変更
- 「サイズ」をフルサイズに変更 ※任意のサイズでOK
- 「ギャラリーを挿入」ボタンをクリック
ギャラリーを表示したようす
ギャラリーを設定した後は記事のプレビューで確認します。
投稿ページ編集画面の「プレビュー」ボタン↑プレビューボタンをクリックします。
公開済みの既存記事の場合は変更をプレビューボタンをクリックします。
Easy FancyBoxのギャラリー画像を挿入定した記事↑ギャラリーに3枚画像挿入した状態です。どれか1つの画像をクリックします。
Easy FancyBoxのギャラリー画像をポップアップ拡大表示させた画面↑ギャラリー設定した画像をクリックするとポップアップ表示され、矢印キーで次の画像を表示させることができます。
初期設定のままだと画像の下に代替テキストに入力した文字が表示されますが、上の写真はその機能をオフにしています。設定方法は後述します。
拡大画像の下の代替テキストの文字を非表示にする方法
Easy FancyBoxは初期設定から変更する箇所は殆どありませんが、唯一ひとつだけ設定を変更したほうが良い箇所があります。
それは画像をクリックして拡大表示した時に下に表示される文字を非表示にする設定です。
文字が表示されていると下の画像が見えにくいので文字を非表示にした方が良い場合も多いです。
Easy FancyBoxの設定画面
Easy FancyBoxの設定画面を表示させる方法は2つあります。
- インストール済みプラグイン一覧画面のEasy FancyBoxの「設定」から
- メディア設定から
インストール済みプラグイン一覧画面内のEasy FancyBoxの「設定」をクリック
WordPressのダッシュボード(管理者画面)の「設定」の「メディア」を選択Easy FancyBoxの設定はメディア設定の画面の中に埋め込まれています。なのでEasy FancyBox独自の設定画面はありません
メディア設定内にあるFancyBoxの設定項目
メディア設定の画面内に下のほうに表示されているFancyBoxの画像の外観の項目にある次の☑を外してオフにします。
メディア設定内にあるFancyBoxの画像(設定)にある外観(設定)- 「タイトルを表示」のチェックボックス内の☑を外してオフにします
- 「変更を保存」ボタンをクリックします。
以上で拡大画像の下に表示される文字を非表示にする設定は完了です。
設定を変更してもレンタルサーバー側のキャッシュやプラグインのキャッシュが残っていたりすると即時に設定が反映されません。しばらく経ってから確認してください。
まとめ
Easy FancyBoxを導入するメリットは画像を拡大してポップアップ表示できることと、×ボタンで簡単に表示画像を閉じることが出来る点にあります。
注意点としては元々ある画像の解像度サイズが小さい場合は画像を拡大表示させても小さく表示される点です。とくにPCの利用者にとっては拡大した画像と元の画像との差がほとんど無いこともあります。
スマホだと2本の指でタッチパネルをつまむように操作(ピンチ)することで画面を拡大できるのでそもそもEasy FancyBoxを導入して記事の画像を拡大表示させる意味がありません。
複数枚の画像を順送りに出来るギャラリー機能しか実質意味をなしません。
とはいえ、ブログ・サイトの用途によっては使い道はあります。
高解像度写真を載せたり画像の細かい部分をPCの利用者に確認してもらいたい場合などです。
アップデート(更新)もされているのでセキュリティの面でも安心して使うことができます。
入れておいてもとくにデメリットは無いので導入を検討してみてはいかがでしょうか。
