Easy FancyBoxの設定方法と使い方（画像や写真、YouTube動画などを記事内で拡大ポップアップできるプラグイン）

 

ここでは、Easy FancyBoxの設定方法と使い方（画像や写真、YouTube動画などを記事内で拡大ポップアップできるプラグイン）について紹介する。

 

Easy FancyBoxとは

 

 

Easy FancyBoxとは、クリックした記事内画像やYouTube動画などを、拡大ポップアップさせることができるプラグインである。

 

＊クリックする

 

＊実際にクリックするとこんな感じに表示される。

 

ちなみにこうした、記事内画像を拡大ポップアップさせるプラグインは他にもたくさんあるのだが、この「Easy FancyBox」は他のプラグインよりも高性能となっている。

 

画像以外にも、PDFファイルやYouTube動画なども拡大表示することができるのだ。

 

「YouTube動画」とかは、拡大表示後に記事内で再生できる。

大量のYouTube動画を埋め込んだサイト（ブログ）などでは、通常だと読み込みが遅くなりがちだが、この手法だと表示速度がそれほど落ちないとされている。

 

Easy FancyBoxの設定方法と使い方

 

Easy FancyBoxの設定方法としては、管理画面（ダッシュボード）から、「プラグイン」、「新規追加」へと進む。

 

 

そうしたら、画面が「プラグインを追加」に切り替わる。

右側にあるキーワードの検索欄に「Easy FancyBox」と入力する。

入力後は、Easy FancyBoxの項目が画面に表示されるので、そこにある「今すぐインストール」ボタンをクリックする。

 

 

インストール後は、「有効化」ボタンをクリックする。

 

設定方法と使い方

 

プラグインの有効化が終われば、このプラグイン（Easy FancyBox）は基本的には使用できる。

 

ただし、拡大ポップアップで表示したい画像などは、全てメディアファイルで表示するようにしておかなければならない。

なので、リンク先を「メディアファイル」にしていない場合には、修正する必要がある。

 

他に、細かい設定も可能だが、私は全くいじっていない。

デフォルト設定でも問題なく、使用可能なのだ。

 

 

もし設定を変更したい場合には、管理画面（ダッシュボード）から、「設定」、「メディア」へと進むと設定を変更することができる。

 

 

メディア設定画面で、下記にスクロールすると「FancyBox」という項目があるのでここで設定を変更する。

 

YouTube動画を拡大ポップアップ表示する方法

 

 

YouTube動画を拡大ポップアップで表示して、記事内で再生したい場合には「Media」の項目にある「YouTube」にチェックを入れる。

 

 

そして、下記にスクロールして「変更を保存」ボタンをクリックする。

 

 

変更を保存後は、自動で「FancyBox」に「YouTube」の設定項目が追加される。

これで、あとは画像や動画等のURLをaタグで囲むと、自動で拡大ポップアップ表示されるのである。

 

＊クリックする

 

＊実際にクリックするとこんな感じに表示される。

 

aタグで囲む方法

 

YouTube動画をaタグで囲むには、投稿（固定）ページで「メディアを追加」をクリックする。

 

 

YouTube動画の画像などをアップロード後、その画像を選択。

 

 

画像を選択後は、「投稿に挿入」ボタンをクリックする。

 

 

挿入した画像を選択し、「編集」ボタンをクリックする。

 

 

設定を表示の項目で、

・リンク先をカスタムURLに変更する。

・URLの項目に、拡大ポップアップさせたいYouTube動画のURLを挿入する。

 

 

終わったら、「更新」ボタンをクリックする。

 

 

これで、画像をクリックすればYouTube動画が拡大ポップアップで表示されるようになる。

 

 

 

ちなみにYouTube動画のURLは、YouTube動画のページ下部にある「共有」をクリックすれば取得できる。

 

 

そこで、「コピー」をクリックすれば、URLをコピーできるのでそのまま張り付ければOK。

 

AFFINGER5

あと「AFFINGER5」のテーマだと、自動でYouTube動画を画像にしてしまう、という便利な機能がある。

 

AFFINGER5では、プラグイン（Easy FancyBox）を有効化後にYouTube動画の設定をして、後は、投稿ページで「タグ」、「その他のパーツ」、「YouTube」をクリックする。

 

 

すると、[youtube id=]というショートコードが生成されるので、「id=」の部分にYouTube動画のURL（https://youtu.be/を省いたURL）をコピペで張り付ける。

 

 

上記のように入力すればOKなのだ（私のYouTube動画の場合）。

 

 

後は、記事を公開しても良いし、プレビュー画面で確認してみても良い。

 

AFFINGER5だと、上記のように画像が自動で生成される。

もちろん、クリックするとYouTube動画を拡大ポップアップで表示させることができるのである。

 

YouTube動画が多いサイト（ブログ）をお持ちの方は、AFFINGER5にテーマを変更してみるのも良いかもしれない。

 

➡WING（AFFINGER5）

 

FancyBox for WordPress

 

最後に私の他サイト（ブログ）で、この「Easy FancyBox」をインストールして有効化したら、上手く拡大ポップアップで表示されなかったので、「FancyBox for WordPress」という別の拡大ポップアッププラグインを使用した。

 

こちらも設定は簡単で、私はただプラグインをインストールし、有効化したのみ。

画像（写真）が、拡大ポップアップで表示されれば十分だったので…

 

以上で、Easy FancyBoxの設定方法と使い方（画像や写真、YouTube動画などを記事内で拡大ポップアップできるプラグイン）についての解説は終了する。