『Easy FancyBox』画像をクリックすると拡大表示してくれるプラグイン

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

506人の購読者に加わりましょう

スポンサードリンク

 


今回はWordPressでブログを作る際におすすめのプラグイン『Easy FancyBox』の使い方をご紹介します。

Easy FancyBoxとは?

Easy FancyBoxとは、記事内の画像やYouTubeの動画などをクリックするとポップアップし、拡大表示してくれるプラグインです。

下の二つの画像の内、左の画像はWordPressのデフォルトの状態、右側がEasy FancyBoxを適用させた画像となっています。

試しにクリックしてみてください。

 

拡大表示された際の大きさは元画像の大きさが適用されます。

上の画像は幅800pixelの画像を幅300pixelに縮小表示しているので、ポップアップした際に元画像の幅800pixelで拡大表示するようになっています。

※表示される最大サイズは《設定⇒メディア》でご確認ください。

このように記事内の画像を拡大ポップアップしてくれるプラグインは他にもいくつかあるのですが、『Easy FancyBox』は設定も簡単で扱いやすく高性能なプラグインとなっています。

画像以外にもYouTubeの動画やPDFも拡大ポップアップ表示させることができます。

Easy FancyBox設定方法

管理画面から《プラグイン》《新規追加》と進みます。

次にキーワード欄に《Easy FancyBox》と入力し、《今すぐインストール》をクリック。

インストールが完了したら《有効化》ボタンをクリック。

画像だけを拡大表示するのであれば基本的にこれで設定完了です。

メディア設定

YouTubeの動画やPDFを拡大表示させたり、細かい設定はメディア設定で行います。

管理画面から《設定》《メディア》と進みます。

YouTubeの動画を拡大表示させる設定

下にスクロールすると新たに『FancyBox』という項目が追加されています。

YouTubeの動画を拡大表示させる場合は「Media」の項目内の「YouTube」にチェックを入れます。

PDFを使用されるのであれば同じように「PDF」にチェックを入れてください。

チェックを入れたら、一番下にある「変更を保存」ボタンをクリック。

変更保存後にYoutube等のチェックを入れた項目が追加されます。

基本的に初期設定のままでも大丈夫ですが、「自動で検出する画像形式」のみ追加で[.jpg .jpeg .png .webp.gif]を入力しています。

設定が終わったら「変更を保存」で設定は完了です。

Easy FancyBoxの使い方

画像をポップアップ

記事に画像を追加する際に「リンク先」を「メディアファイル」に変更します。

これで画像がポップアップし、拡大表示されるようになります。

YouTubeの動画をポップアップ

YouTubeの動画をポップアップさせるには、動画のURLをaタグで囲むと自動検出され拡大ポップアップ表示されるようになる。

 ◆aタグの例
 <a href="http://www.youtube.com/watch?v=pfxB5ut-KTs">YouTubeテスト動画</a>
 YouTubeテスト動画 ⇐上のタグをテキスト入力した例

上の例だと文字だけの表示になるので、サムネイル画像を使用する際はコチラ↓

↑ポップアップ表示例

まずは、サムネイルとして使用する画像をアップロードする。

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

設定を表示の項目で、

「リンク先」を『カスタムURL』に変更し、URLの項目にポップアップさせたい動画のURLを入力する。

動画のURLをコピー

動画のURLは、

動画下の『共有』ボタンもしくは、動画を右クリックするとコピーできます。

まとめ

Easy FancyBoxは、記事内の画像をクリックした際に美しく拡大表示できるWordPressのプラグインです。

設定も簡単で、画像だけであればインストールし、有効化するだけで簡単に使用できます。

WordPressでブログを作る際にはおすすめのプラグインとなっていますので、少しでも参考になれば幸いです。