Easy FancyBox – 画像を美しく拡大表示できるWordPressプラグイン

Easy FancyBoxは、記事に配置した画像をクリックした際に、拡大画面をふわっと美しく表示できるWordPressプラグインです。Lightbox系のプラグインです。

画像の拡大表示のみであればプラグインをインストールして有効にするだけで利用できます。画像以外にも、YouTube動画・PDF・SWFなど、様々な形式に対応しています。

このプラグインを利用すると画像の拡大表示が視覚的に格好良くなるので、ブログの記事を読む人になんとなく先進的な印象を与えることができます。

はじめに

このプラグインが優れている点

動作見本

Easy FancyBoxは、jQueryのFancyBoxを利用して動作しています。
FancyBoxの公式サイトに実際に動作する様々な種類の見本が公開されています。
実際に動作する見本をご覧下さい。

fancybox

使用上の注意点

このプラグインは他のJavaScriptライブラリと競合する場合が多々あります。
その場合は、他のプラグインやJavaScriptライブラリを利用しましょう。

インストール方法

管理画面から検索してインストールして下さい。
もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Easy FancyBox」で検索
2. WordPress.org からダウンロード

管理画面の設定

管理画面の場所

プラグインの管理画面は、設定のメディアの中に表示されます。

WordPress管理画面 ＞ 設定 ＞ メディア

メディア設定

このプラグインを利用する際は、メディアの設定項目で使用する形式にチェックを入れて下さい。画像以外の形式は、管理画面で指定しないと利用できないので注意して下さい。

拡大表示の外観や動作に関しては、初期設定のままでも運用できます。
細かい設定は後から調整して下さい。

メディアを挿入

記事に画像などのメディアを追加する際は、必ずリンク先に「メディアファイル」を指定して下さい。そうしないとホップアップ表示が動作しません。

ギャラリーを作成

複数の画像を連続して表示するギャラリーを作成する場合は、記事編集画面の上部にある「メディアを追加」ボタンをクリックし、画面左側にある「ギャラリーを作成」を選択し、メディアライブラリから複数の画像を選択して記事に挿入すると、ギャラリーを作成できます。

そうすると、複数の画像を連続して表示させることができます。下記の画面は、4枚の画像を同時選択した例です。

YouTube動画の使用例

Easy FancyBoxでYouTube動画を利用する際は、AタグにYouTubeへのリンクがあれば、自動検出されます。

手動の場合は、Aタグにclassで「fancybox-youtube」を指定します。

<a href="http://www.youtube.com/watch?v=pfxB5ut-KTs">YouTube動画</a>

<a href="http://www.youtube.com/watch?v=pfxB5ut-KTs" class="fancybox-youtube">YouTube動画</a>

手動で指定できる内容（class指定）

動画共有サイト	fancybox-youtube fancybox-dailymotion fancybox-vimeo
その他メディア形式	fancybox-pdf fancybox-swf fancybox-svg
インライン	fancybox-inline fancybox-iframe

画像以外のメディアファイルを利用する場合

画像以外のメディアファイルの場合も同じように自動検出で利用できます。
尚、インラインコンテンツとiframeは手動のみです。自動検出はありません。
詳しくは管理画面に表示される説明（英語）をご覧下さい。

まとめ

Easy FancyBoxは、記事に配置した画像をクリックした際に、拡大画面を美しく拡大表示できるWordPressプラグインです。Lightbox系のプラグインです。

このプラグインは画像が沢山あるブログで利用すると良い感じになります。また、単一の画像だけでなく、複数枚の画像をまとめて表示するギャラリーにも対応しています。

自分が撮影した写真を公開するブログや自分が描いた作品等を公開するブログで活用しましょう。