ワードプレス関連の役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

Easy FancyBox - 記事のサムネイル画像を別ウィンドウ風に拡大表示できるWordPressプラグイン

このエントリーをはてなブックマークに追加

記事公開 2013.09.05

最終更新 2016.12.31

Easy FancyBoxは、記事のサムネイル画像をクリックした際に、拡大画面を別ウィンドウ風にふわっと表示できるプラグインです。Lightbox系のプラグインです。

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

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

はじめに

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

  1. 記事のサムネイル画像をクリックした際に、別ウィンドウ風にふわっと拡大表示できる。
  2. 画像の拡大表示のみであれば、初期設定のままでも利用できる。画像形式はJPG・GIF・PNGに対応。
  3. ギャラリーで複数画像をポップアップ表示することもできる。
  4. YouTube、Vimeo、Dailymotionの動画の表示にも対応している。
  5. PDF、SWF、SVGの表示にも対応している。

動作見本

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

fancybox

使用上の注意点

Easy FancyBoxは、他のJavaScriptライブラリと競合する場合が多々あります。その場合は、解決方法はないので、諦めて他のプラグインやJavaScriptライブラリを利用しましょう。

インストール方法

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

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

管理画面の設定

管理画面の場所

Easy FancyBoxの管理画面は、設定のメディアの中に追加されます。

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

メディア設定

Easy FancyBoxを利用する際は、Mediaの設定項目で使用する形式にチェックを入れて下さい。画像以外の形式は、管理画面で指定しないと利用できませんのでご注意下さい。

ポップアップの外観や動作に関しては、特に変更しなくても利用できます。細かい設定は後から変更しましょう。

メディア設定

メディアを挿入

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

メディアを挿入

ギャラリーを作成

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

ギャラリーを作成

YouTube動画の使用例

Easy FancyBoxでYouTube動画を利用する際は、AタグにYouTubeへのリンクがあれば、自動検出され、ポップアップ表示されます。手動の場合は、Aタグにclassで「fancybox-youtube」を記述します。

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

<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

まとめ

Easy FancyBoxは、記事のサムネイル画像をクリックした際に、ふわっと別ウィンドウ風に拡大表示できるプラグインです。Youtube動画など、画像以外の様々な形式にも対応しています。

このプラグインは、画像が沢山あるWebサイトで利用すると良い感じになります。また、単一の画像だけでなく、複数枚の画像をまとめて表示するギャラリーにも対応しています。自分が撮影した写真を公開するサイトや、自分が描いた作品等を公開するサイトで活用しましょう。

スポンサーリンク

最後までお読み頂き、ありがとうございます

この記事の内容が役に立ったと思ったらソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメントは利用できません。

ソーシャルメディア & RSS

Twitter Facebook Google+ RSSフィード

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

MAG(TCD036)

WordPressテーマ「MAG(TCD036)」

ハイクオリティーな人気ブログを構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら