WordPress ブログ記事内の画像をクリック（タップ）すると画像が飛び出して大きなサイズを表示させることができる機能が「Lightbox」です。
Lightbox はプラグインを入れることで簡単に実装できるのですが、WordPress 5.8 から標準対応になった Webp 形式の画像に対応した Lightbox って意外と少ないのです。
Lightbox プラグインの中ではわりと有名な「Responsive Lightbox」や「WP Lightbox 2」などは実のところ Webp 形式の画像にはまだ非対応なんです。
2022年6月16日に Instant Explorer 11 のサポートが終了したこともあって、そろそろ Webp 形式の画像を記事に使っていこうと思った矢先の Lightbox 非対応。
Lightbox プラグインをいろいろ探して試して使い勝手が良さそうなのを見つけました。
今回は『Webp 形式の画像に対応した Lightbox プラグイン「Easy FancyBox」』を紹介します。
目次
Webp 形式の画像に対応した Lightbox「Easy FancyBox」
Webp 形式の画像にも対応している無料 Lightbox プラグインが「Easy FancyBox」です。
動作は軽いしシンプルな使い勝手。オーバーレイスタイルの背景で、記事が透けてみえるのが好みなのでとても良いです。
もちろんレスポンシブなのでスマホレイアウトでも型崩れを起こしません。
画像の拡張子を追加する項目が設定にあるので、今後 WordPress が「AVIF 形式」に対応したときにも問題なく Lightbox に対応させられるのではないかと思います。
因みに本記事の画像をクリックしたら出てくる Lightbox は「Easy FancyBox」を有効化しているので、実際の動きは記事内の画像をクリックして確認してください（本記事の本文内に掲載している画像はすべて Webp 形式です）。
「Easy FancyBox」のインストール方法
プラグイン新規追加の検索バーに「Easy FancyBox」と入力して出てくる「Easy FancyBox」を「今すぐインストール ▶ 有効化」すればすぐに使える状態になります。
Easy FancyBox はこの部分だけ好みで設定すると良いです
Easy Fancybox の設定は、プラグイン一覧にある Easy Fancybox の「設定」をクリックすると設定ページが開きます。サイドメニューにはありません。
設定の「外観」項目にある「タイトル表示」と「タイトルにサムネイルの alt 属性を許可する」のチェックを好みで外してください。
「2」のチェックが入った状態の Lightbox は、上の画像のようにオーバーレイ + テキストが表示されます（画像の名前 or 代替テキストが表示される）。
「2」のチェックを外すと、上の画像のようにオーバーレイ + テキストは非表示になります。因みに当ブログはこちらの設定。
Lightbox 表示できる画像の拡張子を追加する手順
Easy Fancybox の設定内「画像」項目の「自動検出」に画像の拡張子を追加すると、追加した拡張子の画像が Lightbox として表示できるようになります。
上の画像の場合は「.jpg .jpeg .png .webp」ですが「.gif」を追加すれば、GIF 形式の画像が Lightbox できるようになります。
また、今後 WordPress で AVIF 形式の画像が対応したとなれば「.avif」を追加することで、おそらく AVIF 形式の画像も Lightbox できるんじゃないかと思います。
あとがき
今回は「Webp 形式の画像に対応した Lightbox プラグイン Easy Fancybox」を紹介しました。Webp 対応で、これだけ軽量でシンプルな使い勝手の Lightbox プラグインはあまり見かけないので貴重なプラグインだと思います。
