Easy FancyBoxの使い方:画像の拡大表示を可能にするプラグイン

記事内の画像を拡大表示できるようにするには?

記事に貼り付けた画像が小さくなって見づらい!と感じたことがあるのではないでしょうか。

そんな時は、画像の拡大表示を可能にする便利なWordPressプラグインを活用しましょう。
画像の細部までを見せたい時や、サイトに動きを加えたい時などにはもってこいです。

今回は、画像をクリックするとその場で拡大表示することができるWordPressプラグイン「Easy FancyBox」の設定方法から使い方までを解説していきます。

ぶろぐ先生
使い方も簡単だから、画像を拡大表示させたい方は是非試してみてね!

Easy FancyBoxとは

画像をクリックすると、その場で浮かび上がるように拡大表示される機能のことを「LightBox」と呼びます。
LightBoxを実装するには、JavaScript・jQueryなどの知識が必要になりますが、WordPressプラグイン「Easy FancyBox」を使用すれば専門的な知識がなくとも、簡単にその場での拡大表示を可能にすることができます。

ページ移動をせずに、拡大画像のポップアップが表示される手軽さ。また、WordPressのギャラリー機能にも対応している非常に使い勝手の良いプラグインが「Easy FancyBox」です。

Easy FancyBoxの特徴

  • 画像をその場で拡大表示
  • JPG、GIF、PNGの画像形式に対応
  • WordPressのギャラリー機能に対応
  • Youtube、Vimeo、Dailmotionのビデオに対応
  • PDF、SWF(Flashファイル)、SVGに対応

Easy FancyBoxの導入から設定まで

まずは、WordPress管理画面からEasy FancyBoxをインストールしましょう。

他のjQuery系のプラグインやJavaScriptライブラリを同時に利用すると、不具合が起きる可能性もあるのでご注意ください。

プラグインのインストール

ダッシュボードの左のメニューにある
プラグイン」→「新規追加」を選択します。

 

プラグインを追加する画面が表示されたら、
キーワードに「Easy FancyBox」を入力して検索しましょう。

今すぐインストール」をクリックしてしばらく待つと、インストールは完了です。
そのままプラグインを有効化しましょう。

Easy FancyBoxの設定

有効化したら、Easy FancyBoxの設定画面を確認しましょう。

ぶろぐ先生
画像の拡大表示だけだったら初期設定のままでも問題ないけど、一応チェックしておこう!

ダッシュボードの左メニューにある
設定」→「メディア」を選択すると、設定画面に移ります。

 

画像以外にも拡大表示を有効化する場合には、メディア項目で各自チェックを入れましょう。
色やスライドの動きなどは、自分好みに調節してください。

画像の拡大表示を反映させる方法

記事投稿画面で「メディアを追加」をクリックしましょう。

 

拡大表示させたい画像を選択したら、リンク先を【メディアファイル】にして投稿に挿入します。

 

プレビューできちんと反映されているか確認しましょう。
クリックで拡大※デフォルト設定

 

代替テキストを入力した場合は、このようにタイトルが表示されます。

ギャラリーで反映させる方法

記事投稿画面の「メディアを追加」から左側の項目「ギャラリーを作成」をクリックして、いくつかの画像を選択しましょう。

 

ギャラリーの編集画面から、リンク先を【メディアファイル】にしてギャラリーを挿入しましょう。

 

ギャラリーでは、画像を前後に行き来することができる矢印のボタンが表示されます。

 

Easy FancyBoxの使い方は以上です。

ぶろぐ先生

きちんと反映された?

まとめ

Easy FancyBoxの設定方法から使い方までを解説しました。

綺麗に画像を拡大表示できるので、記事に画像を多用している方には是非導入してもらいたいプラグインです。また、サイトに動きが加わることで、ユーザーにとって印象的なサイトになります。これからもユーザーを意識したサイト作りを心掛けていきましょう。