サイト内に掲載した画像をその画像ファイルへのリンクとともに表示する場合、たとえ別タブ表示で開く設定をしていたとしても、画像を見終わったら、いちいち元のタブに戻らなければならず、若干ではあるもののサイト訪問者に煩わしさを与えしまいます。
こういった煩わしさを与えることのないよう対策を講じる必要がありますが、同じウィンドウ内で画像が浮き上がらせるようにするというのもひとつの対策です。
そこで、今回は画像を浮き上がらせて表示するためのWordPressプラグイン『Easy FancyBox』のインストール方法と使い方について、画像を用いて丁寧に解説していきたいと思います。
このプラグインでできることと導入の意義
サイト訪問者の利便性を向上させることは、サイトや運営者のブランドの形成にも役立つ上、結果としてページビューや滞在時間が延びれば、ひいては検索エンジン上位表示対策上も有利に働きます。
画像をクリックすると、その画像の元ファイルをブラウザに表示するように、画像とあわせてリンクを仕込む場合、ユーザーに『戻る』ボタンを押させて、サイドページの読み込みを行わせる煩わしさがないよう、別タブで開くようにすることが勧められます。
しかしながら、この場合でも結局、元のタブに戻るためには、ブラウザの上方でタブをクリックするという煩わしさは残ってしまいます。
今回ご紹介している『Easy FancyBox』プラグインを利用すれば、下記の画像のように画像をクリックすると、同じウィンドウ内で、画像を浮き上がらせて表示することが出来ます。
ユーザビリティの向上に役立つ上、訪問者に対してスタイリッシュな印象を与えることも出来ます。
Easy FancyBoxのインストール方法
WordPressへのログインとプラグインの新規追加
WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
検索窓に『Easy FancyBox』と入力し、Enterキーを押します。
検索結果に表示された『Easy FancyBox』のところの『いますぐインストール』をクリックします。
『OK』をクリックします。
プラグインの有効化
『プラグインを有効化』をクリックします。
Easy FancyBoxの設定方法
Easy FancyBOxは特に設定を行わなくても、有効化すれば、基本的な機能はすぐに使用できます。
ここでは、このプラグインによる表示の対象となるファイルの種類を指定したり、外観を変更する設定項目について説明します。
設定画面の呼び出し
左メニュー中の『設定』⇒『メディア』をクリックします。
『メディア』の中に『FancyBox』という設定項目が追加されています。
Media
⇒対象となるメディアを選択します。PDFや埋め込み動画も指定できる模様です。
リンク
⇒デフォルトで特に問題ないと思います。
Overlay
⇒デフォルトで特に問題ないと思います。
Window
⇒『✕(閉じる)』ボタンの表示の有無やウィンドウのサイズの変更を行います。
Images
⇒画像の動作に関する設定やタイトルを表示するかどうか等について設定を行います。
設定完了後、『変更を保存』をクリックします。
動作確認
実際に画像を設置して、プラグインが正しく動作するかどうかテストをしてみました。
記事内への画像へのリンク付き画像の設置
記事投稿画面で本文編集欄にカーソルを置き、『メディアを追加』をクリックします。
メディアライブラリが開きます。
1.画像を選択します。
2.画像の設定を行います。
※このとき、リンク先として『メディアファイル』を選択しておきます。
3.『投稿に挿入』をクリックします。
記事の確認
記事を更新後、記事内の画像をクリックすると、画像が浮き上がって表示されるようになっています。
以上になります。