≫メルマガにてブログ無料相談OKです。

WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方

はじめ

  • WordPressに挿入した画像が小さいから拡大させたい!
  • 画像をポップアップさせるプラグインが知りたい!

本記事では、上記の悩みにお答えしていきます。

この記事を読めば、WordPressの画像をクリックしたら拡大(ポップアップ)させるプラグインを知ることができますよ。

 

1. WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方

WordPressに挿入した画像をクリックした時に拡大させるプラグインは色々とありますが、最もおすすめなのが「Easy FancyBox」です。

インストールしただけで、簡単に使うことができ、画像だけではなく、PDFファイルやYoutubeも拡大(ポップアップ)することができます。

ここでは、「Easy FancyBox」の使い方について解説していきます。

Easy FancyBoxの使い方
  1. 「Easy FancyBox」をインストールする
  2. 記事に拡大させたい画像を挿入する
  3. 画像のリンク先を「メディアファイル」にする
  4. 画像に説明文を入れる時は「代替えテキスト」に入力

 

1-1. 「Easy FancyBox」をインストールする

まずはプラグイン「Easy FancyBox」をインストールしましょう。

WordPressの管理画面から「プラグイン→新規追加」を選択し、「Easy FancyBox」と検索。

 

「Easy FancyBox」をインストールして、有効化させます。

 

「Easy FancyBox」は、設定が一切要らないプラグインなので、下準備はこれでOKです。

 

1-2. 記事に拡大させたい画像を挿入する

次に実際に拡大させたい画像の設定についてです。

まずは、Wordpressの記事に画像を挿入します。

 

 

1-3. 画像のリンク先を「メディアファイル」にする

次に、画像の「編集」を選択します。

 

「画像詳細」という画面が表示されるので、その中の「リンク先」を「メディアファイル」に指定します。

 

 

1-4. 拡大した画像に説明文を入れる時は「代替えテキスト」に入力

さらに、拡大した画像に説明文を入れたい時は、「代替えテキスト」に説明文を入力しましょう。

 

すると、以下のように画像をクリックすると拡大(ポップアップ)され、説明文が表示されるようになります。

「Easy FancyBox」画像を拡大するサンプル

 

といった感じで、「Easy FancyBox」を使えば、初心者でも簡単に写真や画像を拡大させる事ができますのでおすすめです。

 

2. 「Easy FancyBox」以外の画像を拡大させる4つのプラグイン

ちなみに、「Easy FancyBox」以外にも画像を拡大させるプラグインはあります。

個人的には「Easy FancyBox」が最もおすすめなプラグインですが、もし他のプラグインも試してみたいと考えている方は、参考にしてみてください。

画像を拡大させるプラグイン
  • FancyBox for WordPress
  • WP jQuery Lightbox
  • WP Lightbox 2
  • WP SexyLightBox

 

3. WordPressで画像を拡大(ポップアップ)させる時の画像サイズ

次に、Wordpressで画像を拡大(ポップアップ)させる時の画像サイズの注意点について解説します。注意点は以下の3つです。

拡大させる時の画像サイズの注意点
  1. 記事内の画像表示最大幅よりも大きいサイズにする。
  2. 拡大する画像のサイズは1200px~1500pxがおすすめ!
  3. 「リサイズ→圧縮処理」を行うことを忘れない。

 

3-1. 記事内の画像表示最大幅よりも大きいサイズにする。

まず、拡大させる画像のサイズは、記事内の画像表示最大幅よりも大きいサイズにしましょう。

私が使っているスワローの場合、記事内の画像表示最大幅は「800px」です。

 

つまり、それよりも大きいサイズの画像をアップロードしないと、単にポップアップされるだけで、画像が拡大されるという見た目にはなりません。

なので、あなたが使っているWordpressのテンプレートの画像表示最大幅を調べて、それよりも大きい画像サイズでアップロードしましょう。

WordPressテンプレートの画像表示最大幅がわからない方は以下の記事を参考にしてみてください。

 

3-2. 拡大する画像のサイズは1200px~1500pxがおすすめ!

先ほどお話した通り、拡大する画像は記事内の表示最大幅より大きいサイズの画像を使うことがおすすめですが、

あまりにも大きすぎる画像をアップロードしてしまった場合、ページの表示速度が重くなってしまいます。

そのため、拡大する画像のサイズは1200~1500pxに設定しておけば問題ないです。

 

3-3. 「リサイズ→圧縮処理」を行うことを忘れない。

特に拡大する画像は、サイズが「1200px~1500px」と大きくなるため、そのままブログにアップしてしまうと、

容量がとても重くなります。

そのため、アップロードする前には「リサイズ→圧縮処理」を行うことを徹底しましょう。

「リサイズ→圧縮処理」の方法がわからない方は以下の記事で解説していますので、参考にしてみてください。

 

まとめ

今回は、WordPressの画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方について解説してきました。

Easy FancyBoxの使い方
  1. 「Easy FancyBox」をインストールする
  2. 記事に拡大させたい画像を挿入する
  3. 画像のリンク先を「メディアファイル」にする
  4. 画像に説明文を入れる時は「代替えテキスト」に入力

「Easy FancyBox」を使えば、画像・PDF・Youtubeを拡大(ポップアップ)が簡単に可能になるので、ブログの利便性を高めたい方にはおすすめです。

特に、私のブログのように解説系のコンテンツでは、非常に重宝するプラグインとなっていますよ。

「Easy FancyBox」を使って、見た目もオシャレにまたユーザービリティの高いブログを構築しましょう。

WordPressブログの画像を最適化する7つの施策【まとめ】