みなさん、WordPressしてますか？
今回は、以前ご紹介した画像におしゃれなポップアップ拡大表示機能をつけることができるプラグイン「Easy FancyBox」の設定方法をご紹介していきます。
「Easy FancyBox」の主な設定項目
Easy FancyBoxをインストールし有効化した後に、WordPress管理画面の「設定」＞「メディア」内にFancyBoxという項目が追加されています。
Easy FancyBoxの細かな挙動や表示の調整は、ここから変更することができます。
以下では１つずつ設定項目の解説をしていきます。
Media
Mediaでは、Easy FancyBoxを実装させたいファイルの種類を決めることができます。
一般的には、『Image』と『PDF』で充分だと思いますが、文章にも実装したい方は、『Inline content』にもチェックを入れておきましょう。
Overlay
Overlayでは、ポップアップして表示される画像周辺の設定をおこなうことができます。
『Show the overlay around content opened in FancyBox.』では画像の周りの透明化の有り無し、『Close Fancy Box when overlay is clicked.』では、表示した際の画像の右上に閉じるボタンを作るかの設定をすることができます。
ちなみに、『Opacity』では画像周りの透明度の設定、『Color』では画像周りを何色で透明化させるかの設定項目となります。
Windows
Windowsでは、ポップアップ画像の枠線の色や画像幅を変更することができます。
『Show the (X) close button』では、右上の閉じるボタンの表示・非表示の設定ができます。
これは、ユーザビリティ的向上の役割もあるため、必ずチェックを入れて設定することをおすすめします！
『Title color』と『Border color』では、画像の枠線とタイトルの色を調整することができます。
色コードは３桁のコードを入力することで変更することが可能です。
また『枠線』では、画像周りの枠線の幅、『Margin』では画像を画面と画像の間隔をどの程度空けるかの調整をすることができます。
デフォルトでは10の設定になっていますが、お好みに合わせて数字を入れて調整してみてください。
『Scale large content down to fit in the browser viewport』では、ポップアップ表示の
画像を画面内に収めて表示させるか否かを決めることができます。
アップロードした画像のサイズが大きい場合は、表示からはみ出して表示されてしまいますので、この項目は、必ずチェックを入れることにしましょう。
Miscellaneous
ここの設定は画像の読み込みについての設定をおこないます。
基本的にはプラグインをインストールした際のデフォルトの設定で、問題ありません。
Image
ここでは、画像に関する設定の調整をおこなうことができます。
『Autodetect』では、クリックした画像を拡大表示させるファイルの形式を入力します。
これも初期設定の「.jpg」「.jpeg」「.png」を入れておけば問題ないでしょう。
追加の形式を入力する場合は、半角スペース区切りでデータの形式を追加します。
『Close FancyBox when content is clicked』では、拡大した画像をクリックした時に画像を閉じるか否かの設定をおこないます。
ユーザーが誤って拡大表示された画像をクリックしてしまう場合も想定されるため、基本的にはチェックを外しておきましょう。
『Show title』では、画像拡大表示の際に左下に画像のタイトルを表示させるかどうかの設定をおこないます。
タイトルも表示させたい場合は、チェックを入れましょう。
『Autogallery』は、同じページ内での画像の切り替えをするかどうかの設定を変更することができます。
同ページ内の複数の画像を連続して閲覧させたい場合は、「All in one gallery」を設定しておきます。
まとめ
いかがでしたでしょうか？
今回は、クリックすると画像がポップアップ表示にすることができるWordPress用プラグイン「Easy FancyBox」の主な設定項目をご紹介してきました。
ご紹介した項目以外にもたくさんの設定項目がありますが、ぜひ色々な設定をおこなってみて、ご自身のブログに合う設定を実装してみてはいかがでしょうか？
最後までお読みいただきありがとうございました。