この記事は約 3 分で読めます ( 約 1382 文字 )

記事の概要

この記事では、WordPressで画像を浮き出るように拡大できるプラグインである「RavanH」氏の「Easy FancyBox」を紹介します。

「Easy FancyBox」とは?

「Easy FancyBox」とは、WordPressで画像を浮き出るように拡大できるプラグインです。

「Easy FancyBox」の導入方法

手順1WordPressの管理画面にログインします。

手順2管理画面の左メニューの”プラグイン”をクリックします。

wp_plugin-001

手順3”プラグイン”の中の”新規追加”をクリックします。

wp_plugin-002

手順4画面右上の検索欄に”Easy FancyBox”と入力します。

easy_fancybox-001

手順5下記画像のプラグインを探して”インストール”をクリックします。

easy_fancybox-002

手順6”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「Easy FancyBox」の設定方法

手順1WordPressの管理画面の左メニューの”設定”をクリックします。

easy_fancybox-003

手順2”設定”メニューの”メディア”をクリックします。

easy_fancybox-004

手順3”メディア設定”の中ほどに「Easy FancyBox」の設定メニューが現れます。

easy_fancybox-005

手順4Mediaの欄は適用したい項目にチェックを入れます。リンク、Overlayはデフォルトで構いません。

easy_fancybox-006

手順5Window、Miscellaneousはデフォルトで構いません。

easy_fancybox-007

手順6ImageのAutodetectを空欄にします。他はデフォルトで構いません。

easy_fancybox-008

手順7Inline Content、PDF、SWF、SVGの項目は特に弄る必要はありません。これらの項目は手順4でチェックを入れて保存を押した時に表示されます。

easy_fancybox-009

手順8Youtube、Vimeo、Dailymotion、iFramesの項目は特に弄る必要はありません。これらの項目は手順4でチェックを入れて保存を押した時に表示されます。最後に保存をクリックします。

easy_fancybox-010

画像を浮き出るように拡大する方法

手順1編集する記事の編集画面を表示しておきます。

手順2編集画面上部の”メディアを追加”をクリックします。

easy_fancybox-011

手順3画像をアップロードするなりして1枚画像を選びます。その際に右下の”添付ファイルの表示設定”のリンク先を”メディアファイル”に設定します。

easy_fancybox-012

手順4ソースコードを以下のように書き換えます。

変更前

<a href="(画像URL)"><img (略) src="(画像URL)" alt="(画像の名前)" (略) /></a>

変更後

<a href="(画像URL)" class="fancybox"><img (略)  src="(画像URL)" alt="(画像の名前)" (略)/></a>

結果

Gran Turismo 6

まとめ

この記事では「RavanH」氏の「Easy FancyBox」を使ってWordPressで画像を浮き出るように拡大する方法について書きました。

ImageのAutodetectを空欄にした理由はアフィリエイト用のバーナーが正常に動作しなくなるからです。

画像リンクのAタグの部分にに” class="fancybox"”を加えたのはこうすることで画像の拡大時に浮き出るようにできるからです。

この記事が皆さんのお役に立てれば幸いです。