Stable Life
サイトアフィリやメルマガを駆使して稼ぐ元公務員社長井野瑛太のオフィシャルブログ
画像解説版

Easy FancyBoxのインストール方法と使い方【画像解説】

サイト内に掲載した画像をその画像ファイルへのリンクとともに表示する場合、たとえ別タブ表示で開く設定をしていたとしても、画像を見終わったら、いちいち元のタブに戻らなければならず、若干ではあるもののサイト訪問者に煩わしさを与えしまいます。

こういった煩わしさを与えることのないよう対策を講じる必要がありますが、同じウィンドウ内で画像が浮き上がらせるようにするというのもひとつの対策です。

そこで、今回は画像を浮き上がらせて表示するためのWordPressプラグイン『Easy FancyBox』のインストール方法と使い方について、画像を用いて丁寧に解説していきたいと思います。

このプラグインでできることと導入の意義

サイト訪問者の利便性を向上させることは、サイトや運営者のブランドの形成にも役立つ上、結果としてページビューや滞在時間が延びれば、ひいては検索エンジン上位表示対策上も有利に働きます。

画像をクリックすると、その画像の元ファイルをブラウザに表示するように、画像とあわせてリンクを仕込む場合、ユーザーに『戻る』ボタンを押させて、サイドページの読み込みを行わせる煩わしさがないよう、別タブで開くようにすることが勧められます。

しかしながら、この場合でも結局、元のタブに戻るためには、ブラウザの上方でタブをクリックするという煩わしさは残ってしまいます。

今回ご紹介している『Easy FancyBox』プラグインを利用すれば、下記の画像のように画像をクリックすると、同じウィンドウ内で、画像を浮き上がらせて表示することが出来ます。
ユーザビリティの向上に役立つ上、訪問者に対してスタイリッシュな印象を与えることも出来ます。
Easy FancyBox00

Easy FancyBoxのインストール方法

WordPressへのログインとプラグインの新規追加

WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
Easy FancyBox01

検索窓に『Easy FancyBox』と入力し、Enterキーを押します。
Easy FancyBox02

検索結果に表示された『Easy FancyBox』のところの『いますぐインストール』をクリックします。
Easy FancyBox03

『OK』をクリックします。
Easy FancyBox04

プラグインの有効化

『プラグインを有効化』をクリックします。
Easy FancyBox05

Easy FancyBoxの設定方法

Easy FancyBOxは特に設定を行わなくても、有効化すれば、基本的な機能はすぐに使用できます。
ここでは、このプラグインによる表示の対象となるファイルの種類を指定したり、外観を変更する設定項目について説明します。

設定画面の呼び出し

左メニュー中の『設定』⇒『メディア』をクリックします。
Easy FancyBox06

『メディア』の中に『FancyBox』という設定項目が追加されています。

Media
⇒対象となるメディアを選択します。PDFや埋め込み動画も指定できる模様です。

リンク
⇒デフォルトで特に問題ないと思います。

Overlay
⇒デフォルトで特に問題ないと思います。
Easy FancyBox07

Window
⇒『✕(閉じる)』ボタンの表示の有無やウィンドウのサイズの変更を行います。

Images
⇒画像の動作に関する設定やタイトルを表示するかどうか等について設定を行います。
Easy FancyBox08

設定完了後、『変更を保存』をクリックします。
Easy FancyBox09

動作確認

実際に画像を設置して、プラグインが正しく動作するかどうかテストをしてみました。

記事内への画像へのリンク付き画像の設置

記事投稿画面で本文編集欄にカーソルを置き、『メディアを追加』をクリックします。
Easy FancyBox10

メディアライブラリが開きます。
1.画像を選択します。
2.画像の設定を行います。
 ※このとき、リンク先として『メディアファイル』を選択しておきます。
3.『投稿に挿入』をクリックします。
Easy FancyBox11

記事の確認

記事を更新後、記事内の画像をクリックすると、画像が浮き上がって表示されるようになっています。
Easy FancyBox12

以上になります。