WordPressプラグイン

【Easy FancyBox】画像をポップアップ(拡大)表示できるプラグインを徹底解説!

2019年8月29日

Easy FancyBoxアイキャッチ

こんな方に読んでほしい!

  • 記事の画像を拡大表示させたい
  • Webサイトに遊びゴコロを入れ込みたい!
  • めんどくさい設定は(できれば)したくない!

このwebサイトでもそうですが、画像に文字を書くことがあるんですね。

で、実際にwebページに載せてみたら「字がちっさくて読めない・・・。」なんてことが、実は結構頻繁にあったんです。

そこで、クリックすると拡大表示できるプラグイン「 Easy FancyBox 」を導入しました。使い方も簡単!この記事ではインストールから使い方まで徹底解説します!

ブログで使う画像を探すなら知っておきたい「クリエイティブ・コモンズ」についてはこちらの記事で解説しています。

\記事を読む前にクリックで応援してください!/

1. WordPressプラグイン「 Easy FancyBox 」とは?

記事内の画像をクリックしたときに拡大表示するためのプラグインです。クリックするとポップアップで表示されます。基本的には、インストールすればそれだけで使えますし、変えようと思えばポップアップの仕方(エフェクト)もいろいろ選べます!

試しに、下の画像をクリックしてみてください。

Easy FancyBoxの効果テスト

亀老山から望む来島海峡大橋 by FIND47.JP

ぱっと見の表示が小さくても、クリックするとアップロードした時の画像を表示するので、大きく表示されます。小さな文字も見やすいですね!

ここがポイント!

プラグインの名前は「Easy Fancy Box」ではなく「Easy FancyBox」です。Fancy と Box の間にスペースはありません。

2. WordPressプラグイン「 Easy FancyBox 」のインストール・設定

2-1. Easy FancyBox を インストール

① WordPress管理画面の「 プラグイン > 新規追加」をクリックします。

② 「プラグインを追加」ページが表示されたら、キーワード欄に「 Easy FancyBox 」をコピーして貼り付けてください。

③  「 Easy FancyBox 」プラグインが表示されたら、「今すぐインストール」をクリックします。

 

インストールが終わると「有効化」ボタンが表示されますので、クリックして有効化します。

EasyFancyBox_02_有効化ボタン

 

2-2. Easy FancyBox の 設定

設定はそのままでも問題ありません!設定は後回しでもOKです。

ここがポイント!

設定を後回しにする場合は、「3、Pixabay Images の 使い方」に進んでください。

プラグインを有効化したら、「設定 > メディア 」をクリックし、設定画面を開きます。WordPressの設定項目の下に表示されます。

EasyFancyBox_03_2_設定画面

では、1つ1つ確認していきましょう!繰り返しますが、設定は後回しでもOKですよ!

 

2-2-1. Media

EasyFancyBox_05_設定の説明(メディア)適用するメディアを選択する項目です。ディフォルトは「images(画像)」のみですが、他のメディアにも適用できます。

各メディアの説明は以下の表にまとめておきます。

筆者は、images(画像)とYou Tube だけチェックを付けています。

メディア説明
Image写真・画像
Inline content文章中に入れ込まれたコンテンツです。例えば下のサンプルのような感じ。

ここをクリックしてください!

クリックすると、ポップアップで

文章や画像などを表示できます。これがInline contentです。

Easy FancyBoxの効果テスト
亀老山から望む来島海峡大橋 by FIND47.JP

PDF文書ファイル形式の1つ。
SWF「Flash」によって作成された動画ファイルのこと。
SVG画像ファイル形式の1つで、Illustratorなどで使われるファイル。
Youtube言わずとしれたYoutube!これもポップアップ可能。
VimeoVimeo もYou Tube同様、動画を公開・共有するwebサービス。
DailymotionDailymotion もYou Tube同様、動画を公開・共有するwebサービス。
iFrames他のページ、他のwebサイトの一部をiframeという仕組みで読み込みます。

ここがポイント!

ここでチェックを付けると、画面下部に設定項目が表示されます。

 

2-2-2. Overlay

EasyFancyBox_06_設定の説明(オーバーレイ)

翻訳

Show the overlay around content opened in FancyBox.(FancyBoxで開かれたコンテンツの周りにオーバーレイを表示します。)

Overlayとは「何かを薄く覆う」という意味です。説明するより見ていただいた方が早いですね。

オーバーレイ表示あり(チェックあり)

EasyFancyBox_10_オーバーレイの説明(ON)

オーバーレイ表示なし(チェックなし)

EasyFancyBox_10_オーバーレイの説明(OFF)

その画像や動画が強調されるので、オーバーレイは「あり」の方が良いと考えます。

また、以下の3項目はオーバーレイを「あり」にした時に動作します。

 

翻訳

Close FancyBox when overlay is clicked.

オーバーレイをクリックしたときにFancyBoxを閉じます。

これはチェックを入れておいて良いでしょう。

 

翻訳

Opacity____Value between 0 and 1. Default: 0.7

不透明度 0~1の間で設定し、デフォルトは0.7

入力枠に0~1の間の数値を入れます。「不透明度」なので、1にすると指定した色に塗りつぶされます。

ここがポイント!

 EasyFancyBox_11_オーバーレイの説明(不透明度1.0)

 

翻訳

Color ____Enter an HTML color value. Default: #777

色 HTMLカラーコードで入力、デフォルトは#777

オーバーレイの色を決めることができます。#777はダークグレーです。

HTMLカラーコードはこちらのページを見てみてください。「 # 」と英数字6桁で表されているものがHTMLカラーコードです。

 

2-2-3. Window

EasyFancyBox_07_設定の説明(window)

Appearance(見た目の設定)

翻訳

Show the (X) close button

閉じるボタン (X) を表示する

ぱっと見で閉じ方がわかるように、チェックは入れておきましょう

Background color と Text color、Border radius はプロ版で設定可能になります。

Title color : ポップアップした時に画像の下部分に表示されるタイトルの色をHTMLカラーコードで指定します。

Border color  : ポップアップした時の画像の枠の色をHTMLカラーコードで指定します。

EasyFancyBox_12_画像の名前とボーダーの色設定

 

Dimensions(大きさの設定)

翻訳

幅__ 高さ__ Default: 560 x 340

デフォルトは560 x 340

If content size is not set or cannot be determined automatically, these default dimensions will be used.

コンテンツサイズが設定されていないか、自動的に決定できない場合、これらのデフォルトの寸法が使用されます。

コンテンツサイズが設定されていない場合などに適用されるようですが、「コンテンツサイズが設定されていない場合」ってどんな場合なのかがわかりませんでした。とりあえずディフォルトが560px × 340px なので、特に設定は必要ないでしょう。

枠線 : 写真の外枠の幅を設定します。デフォルトは10xpですが、これがちょうど良いですね。

Margin : 画像外枠とブラウザ外枠との幅(余白)を設定します。特にタブレットやスマホで閲覧する時(画面サイズが画像サイズより小さい時)に、設定した余白を確保できるまで画像を縮小して表示することになります。

EasyFancyBox_14_ボーダー幅とマージン設定

 

Behavior(動きの設定)

翻訳

Center while scrolling (always disabled on touch devices and when content, including the title, might be larger than the viewport)

スクロール中に中央に配置(タッチデバイスでは常に無効になり、タイトルを含むコンテンツがビューポートより大きい場合があります)

チェックを入れると、ポップアップで画像を表示した状態でスクロールすると、画像が付いてくる(常に中央に配置される)状態になります。メリットをあまり感じないので、チェックは付ける必要はありません。

 

翻訳

Esc key stroke closes FancyBox

Escキーを押すことでFancyBoxを閉じる

これはチェックを付けたままでOKです。

 

翻訳

Opening speed __ Closing speed __
Duration in milliseconds. Higher is slower. Default: 300

間隔をミリ秒で設定。高いほど遅い。デフォルトは300

ポップアップが開くスピード、閉じるスピードを設定します。単位はミリ秒なので、デフォルトの300ミリ秒は0.3秒です。これは好みで設定してください。筆者はデフォルトのまま使っています。

 

翻訳

Include the Mousewheel jQuery extension script to allow gallery browsing by mousewheel action.

マウスホイールアクションによるギャラリーブラウジングを可能にするために、Mousewheel jQuery拡張スクリプトを含めます

 

2-2-4. Miscellaneous(その他)

EasyFancyBox_08_設定の説明(Miscellaneous)

Auto popup(自動ポップアップの設定)

ここに注意!

自動ポップアップは、筆者はいらないと考えます。

写真や画像を大きくしたいと思ったら、クリックすれば良いだけでの話です。

見ている人が大きくしたいかどうかを無視して強制的に表示するのは、ユーザビリティ(使い勝手)の低下を招くのでは?と考えているからです。

翻訳

Open on page load Link with ID "fancybox-auto"

ID「fancybox-auto」が付けられたリンクは、ページ読み込み時に開きます。

Delay in milliseconds __ Default: 1000

(表示されてから)何秒遅れて開くようにするか。デフォルトは1,000ミリ秒(=1秒)

Hide popup after first visit?

最初の訪問後にポップアップを非表示にしますか? ※この設定はプロ版で設定可能になります。

 

Browser & device compatibility(ブラウザとデバイスに関する設定)

翻訳

Try to deactivate all conflicting light box scripts in your theme or other plugins. If this is not possible, try a higher script priority number which means scripts are added later, wich may allow them to override conflicting scripts. A lower priority number, excluding WordPress standard jQuery, or even moving the plugin scripts to the header may work in cases where there are blocking errors occuring in other script.

テーマまたは他のプラグインで競合するすべてのライトボックススクリプトを非アクティブ化するようにしてください。これが不可能な場合は、スクリプトの優先順位の数値を高くしてください。これは、スクリプトが後で追加されることを意味します。競合するスクリプトを上書きできる場合があります。 WordPressの標準jQueryを除く(プラグインの)優先順位の数値が低くする(=先に読み込ませる)、あるいはプラグインスクリプトをヘッダーに移動することで、他のスクリプトでブロッキングエラーが発生した場合に機能する場合があります。

ライトボックスとは「画像をクリックするとポップアップで表示するスクリプト(プログラム)」のことです。今回使っているプラグインは「 Easy FancyBox 」ですが、他にもライトボックスを実現するプラグインはありますし、WordPressのテーマに実装されている場合もあります。

ここの文章は「他のライトボックスのプラグインがあれば、競合してうまく動かない可能性があるので、無効にしてくれよな!」ということが書いてあります。

 

翻訳

FancyBox script priority 10 Default priority is 10. Higher is later.

FancyBoxスクリプトの優先度 10 デフォルトの優先度は10です。

WordPressのプラグインは読み込む順番が決められています。

競合するプラグインを無効にできない場合は、後から読み込ませることで、先に読み込ませたプラグインを上書きする(つまり、後から読み込ませたプラグインが優先される)のが一般的な動きです。そのため優先度10(最も優先されない設定=後から読み込む設定)がデフォルトになっています。

 

翻訳

Move scripts from footer to theme head section (not recommended for site load times!)(スクリプトをフッターからテーマヘッドセクションに移動します(サイトの読み込み時間にはお勧めしません!))

チェックすると、他のプラグイン(スクリプト)をヘッダーに移動して先に読み込ませることになります。Easy FancyBoxを後から読み込ませることで、競合するプラグインより優先させることができるオプション設定です。Easy FancyBoxが問題なく動いている(競合していない)のであれば、チェックは不要です。

さらに詳しく!

「サイトの読み込み時間にはお勧めしません!」と書いていますが、プラグイン(スクリプト)をヘッダーで読み込むとWebページの本文などが後回しになるのでユーザビリティ(使い勝手)が低下する可能性を意味しています。そういう意味でもチェックはなるべくしない方が良いですね。

 

翻訳

Do not include standard WordPress jQuery library (do this only if you are sure jQuery is included from another source!)

標準のWordPress jQueryライブラリを含めない(jQueryが別のソースから確実に含まれている場合にのみこれを行ってください!)

初心者は、この項目にチェックは付けないようにしてください。WordPressが動作しなくなる可能性があります。

 

翻訳

Do not use wp_add_inline_script/style functions (may solve issues with older script minification plugins)

wp_add_inline_script / style関数を使用しない(古いスクリプト縮小プラグインの問題を解決できる場合があります)

WordPress4.5で実装されたJavaScriptを読み込むための関数です。これも、初心者はチェックは付けないようにしてください。

 

Advanced(高度な設定)

この2つの項目はプロ版で設定可能になります。

2-2-5. Images(画像に関する設定)

EasyFancyBox_08_設定の説明(Images)

翻訳

To make images open in an overlay, add their extension to the Autodetect field or use the class "fancybox" for its link. Clear field to switch off all autodetection.

オーバーレイ(=ポップアップ)で画像を開くには、自動検出フィールドに拡張子を追加するか、class="fancybox" を使用します。自動検出フィールドの拡張子を削除すると、すべての自動検出がオフになります

Autodetect [ .jpg .jpeg .png .webp ] Example: .jpg .jpeg .png .gif

自動検出[ .jpg .jpeg .png .webp ] 例:.jpg .jpeg .png .gif

自動検出フィールドとは「 Autodetect 」項目の入力欄のことです。この項目に入力した拡張子を対象として、クリックでポップアップ表示するようになります。

 

翻訳

All image links

全ての画像リンクに適用する

プロ版では選択肢が増えるのかもしれませんね。

 

翻訳

Force FancyBox to treat all media linked with class="fancybox" as images?

class = "fancybox"が追加されているすべてのメディアを画像として扱うように強制しますか?

画像以外でも「class = "fancybox"」が追加されていれば画像として扱うこともできるようですが、基本的にそんなことはないので「いいえ」で良いでしょう。

 

Behavior(動きの設定)

翻訳

Transition In [ なし or Fade or Elastic ] Easing In [ Linear or Swing or easeInBack or easeOutBack ]

Transition Out [ なし or Fade or Elastic ] Easing Out [ Linear or Swing or easeInBack or easeOutBack ]

Note: Easing effects only apply when Transition is set to Elastic.

注:Easing効果は、「 Transition In 」が「 Elastic 」に設定されている場合にのみ適用されます。

ポップアップを開く時、閉じる時のエフェクト(効果)を設定することができます。言葉では言い表しにくいので、それぞれ試して、お好みのものを見つけてください

 

翻訳

Transparency fade during elastic transition. CAUTION: Use only when at least Transition In is set to Elastic!

Elastic でポップアップを開く時、閉じる時の透明度のフェード。注意:少なくともTransition InがElasticに設定されている場合にのみ使用してください!

ポップアップを開く時もしくは閉じる時、その画像を半透明にするかどうかを設定する項目です。

スピードをデフォルトの300ミリ秒にしていると、早すぎて違いを確認するのは難しいのでチェックは不要です。

 

翻訳

Close FancyBox when content is clicked

コンテンツがクリックされたらFancyBoxを閉じます

これはチェックを入れておくと良いでしょう。

 

Appearance(見た目の設定)

翻訳

Show title. FancyBox will try to get a title from the link or thumbnail title attributes.

タイトルを表示します。 FancyBoxは、リンクまたはサムネイルのタイトルを取得します。

Title Position [ Float or Outside or Inside or Overlay ]

タイトルの場所

Allow title from thumbnail alt attribute.

サムネイルのalt属性からタイトル取得を許可します。

「Show title~」「Allow title~」どちらもチェックを必ず入れてください。

さらに詳しく!

WordPressで画像を追加すると、htmlは以下のようになります。

「Show title~」では「タイトルを取得」、「Allow title~」では「alt属性をタイトルとして取得」すると書いてあります。ただ、上のhtmlを見ると、

alt="△△△△△△"

は存在しますが、

title="○○○○○○"

は存在しません。つまり、title属性は取得できないんです。

ですので、「Allow title~」にも必ずチェックを入れてください。また、画像を登録する時は「代替テキスト(=alt属性)」を必ず入力してください。SEOにも効果が期待できます!

ここがポイント!

タイトルの場所は以下を参考にしてください。

Float

EasyFancyBox_15_タイトル位置(float)

Outside

EasyFancyBox_15_タイトル位置(outside)

Inside

EasyFancyBox_15_タイトル位置(inside)

Overlay

EasyFancyBox_15_タイトル位置(overlay)

 

Gallery(ギャラリーの設定)

WordPressのギャラリー機能を使う機会は少ないため、割愛します。

 

2-2-6. YouTube(YouTubeに関する設定)

EasyFancyBox_16_You_Tube

翻訳

To make any YouTube movie open in an overlay, switch on Autodetect or use the class "fancybox-youtube" for its link.

YouTubeムービーをオーバーレイで開くには、自動検出をオンにするか、リンクに「fancybox-youtube」クラスを使用します。

Autodetect:自動検出

Enable privacy-enhanced mode:プライバシー強化モードを有効にする

「Autodetect」はチェックを入れておきましょう。「Enable~」は、You Tubeのプライバー保護に関する機能です。これもチェックを入れておきましょう。

幅・高さは、ポップアップ時の大きさを指定します。デフォルトは幅640px、高さ360pxです。また、枠線は何も書いていませんが、デフォルトは10pxですね。

 

翻訳

Show title. FancyBox will try to get a title from the link or thumbnail title attributes.

タイトルを表示します。 FancyBoxは、リンクまたはサムネイルのタイトルを取得します。

Title Position [ Float or Outside or Inside ]

タイトルの場所

Allow title from thumbnail alt attribute.

サムネイルのalt属性からタイトル取得を許可します。

「Show title~」「Allow title~」どちらもチェックを必ず入れてください。

他の情報は、2-2-5. Images(画像に関する設定) > Appearance 項目 を参照してください。

 

3. Easy FancyBox  の 使い方

3-1. 画像を表示する場合

EasyFancyBox_17_画像を登録

① 画像をアップロード

② 代替テキスト欄はポップアップ時に表示されるタイトルになる。SEOの観点からも、必ず入力。

③ リンク先は「メディアファイル」

④ 投稿に挿入をクリック

 

3-2. You Tube を表示する場合

3-2-1. リンク文字をクリックしたら再生する方法

単にリンクを張ればOKです!

デモ:天体観測

3-2-2. サムネイルを取得して、クリックしたら再生する方法

こちらは少し工夫が必要です。htmlとCSSを載せておきますので、コピペして使ってみてください。なお、YouTubeIDは表示したい動画に合わせて変えてくださいね!

デモ:


 

ここに注意!

HTMLにある「j7CDb610Bg0」 が YouTubeIDです。2カ所あるので、表示したい動画のIDに書き換えてください。

 

4. 「 Easy FancyBox 」プラグインのまとめ

基本的にはインストールするだけで使える、使い勝手の良いプラグインです!

しかし、細かい設定変更をしようと思えば、表示のエフェクト(効果)から枠の太さ、表示サイズなど、かなり細かく設定することも可能です。

絶対に必要なプラグインではありませんが、ユーザビリティ(使い勝手)を向上することができるプラグインです。「 Easy FancyBox 」プラグインを使って、人が見やすいwebサイトを目指しましょう!

\参考になったらポチッとお願いします!/

-WordPressプラグイン
-, ,

© 2021 インターネットビジネスラボ