【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

小さな画像をクリックで拡大させたい時ありますよね。
でも、ただ拡大表示させただけだと…

【設定不要】WordPress で画像をふわっと拡大表示なら無料プラグイン「Easy FancyBox」で決まり!
画像をクリック!

こんな感じ。
見た目もよろしくない上に、前のページに戻らなければならない煩わしさ…。

そこで、画像をふわっと美しく拡大表示する Lightbox 系プラグインを紹介します。

Easy FancyBox

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!
https://ja.wordpress.org/plugins/easy-fancybox/

Easy FancyBox の利点は、画像を拡大表示させるだけならプラグインをインストールする以外設定が不要なこと。
そして、スマホ表示に対応していること。
これだけスマートフォンが普及し、モバイルフレンドリーと言う考え方が定着した今、スマホ表示に対応していないプラグインなんて必要ありません。

それでは、インストールからいきましょう。

インストール方法

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

WordPress のダッシュボードにて、「プラグイン」>「新規追加」をクリック、検索窓に「Easy FancyBox」と入力して「今すぐインストール」をクリック・有効化します。

設定方法

WordPress のダッシュボード内、「設定」>「メディア」を開きます。
「FancyBox」という項目が出てくるので必要に応じて設定を行います。
画像を拡大表示させるだけなら特にいじる必要はありません。

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

以下、使いそうな項目だけ説明しています。

Media

拡大表示させる項目を選択できます。
デフォルトで「images」にチェックが入っています。
画像以外にも PDF や YouTube 動画も対応しています。

Overlay

画像を拡大した時の背景を設定します。

  • Opacity:背景の透明度を指定します。0(完全に透明)~1(完全に不透明)、初期値は「0.7」。
  • Color:背景色を指定します。初期値は「#777」。背景色を黒にしたい場合は#000、白なら#fffに変更。

※背景を真っ黒にするときは Opacity:1・Color:#000、半透明の白なら Opacity:0.5・Color:#fff となります。

Window

  • Title color:titleタグで表示した文字の色を指定できます。初期値は背景が「黒(#000)」、文字が「白(#fff)」。
  • Border color:拡大表示した画像の周りの色を指定できます。初期値は「白」。

設定方法

単一の画像を拡大表示する

投稿の「メディアを追加」をクリック。
ポップアップ表示させたい画像をメディアライブラリより選択します。

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

チェックを入れたら「添付ファイルの表示設定」のリンク先を「メディアファイル」に変更して、「投稿に挿入」をクリックします。

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

<a href="https://startmeup.jp/base/wp-content/uploads/digital2183-1.jpg"><img src="https://startmeup.jp/base/wp-content/uploads/digital2183-1.jpg" /></a>

グループとして複数の画像を拡大する

投稿の「メディアを追加」>「ギャラリーを作成」をクリック。
ポップアップ表示させたい画像をメディアライブラリより選択します。

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

チェックを入れたら「ギャラリーを作成」をクリックします。

【設定不要】WordPress で画像をふわっと拡大表示させたいなら無料の Lightbox 系プラグイン「Easy FancyBox」で決まり!

リンク先は「メディアファイル」を指定して「ギャラリーを挿入」をクリック。

<a href="https://startmeup.jp/base/wp-content/uploads/digital2183-1.jpg" rel="gallery-0"><img src="https://startmeup.jp/base/wp-content/uploads/digital2183-1.jpg" /></a>

aタグに rel=”×××” を指定することでグループ化できます。
画像にテキストを表示する場合は、imgタグに title=”×××” を追加して下さい。