▶【注目記事】Windows 11 を導入したら最初にやっておくべき初期設定

Webp 形式の画像に対応した Lightbox プラグイン「Easy FancyBox」

WordPress についての記事

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 の Lightbox プラグイン「Easy FancyBox」

動作は軽いしシンプルな使い勝手。オーバーレイスタイルの背景で、記事が透けてみえるのが好みなのでとても良いです。

もちろんレスポンシブなのでスマホレイアウトでも型崩れを起こしません。

画像の拡張子を追加する項目が設定にあるので、今後 WordPress が「AVIF 形式」に対応したときにも問題なく Lightbox に対応させられるのではないかと思います。

「Easy FancyBox」のインストール方法

「Easy FancyBox」のインストール方法

プラグイン新規追加の検索バーに「Easy FancyBox」と入力して出てくる「Easy FancyBox」を「今すぐインストール ▶ 有効化」すればすぐに使える状態になります。

Easy FancyBox はこの部分だけ好みで設定すると良いです

  1. Easy FancyBox 設定01
    Easy Fancybox の設定は、プラグイン一覧にある Easy Fancybox の「設定」をクリックすると設定ページが開きます。サイドメニューにはありません。
  2. Easy FancyBox 設定02
    設定の「外観」項目にある「タイトル表示」と「タイトルにサムネイルの alt 属性を許可する」のチェックを好みで外してください。
  3. Easy FancyBox 設定03
    「2」のチェックが入った状態の Lightbox は、上の画像のようにオーバーレイ + テキストが表示されます(画像の名前 or 代替テキストが表示される)。
  4. Easy FancyBox 設定04
    「2」のチェックを外すと、上の画像のようにオーバーレイ + テキストは非表示になります。因みに当ブログはこちらの設定。

Lightbox 表示できる画像の拡張子を追加する手順

Lightbox 表示できる画像の拡張子を追加する手順

Easy Fancybox の設定内「画像」項目の「自動検出」に画像の拡張子を追加すると、追加した拡張子の画像が Lightbox として表示できるようになります。

上の画像の場合は「.jpg .jpeg .png .webp」ですが「.gif」を追加すれば、GIF 形式の画像が Lightbox できるようになります。

また、今後 WordPress で AVIF 形式の画像が対応したとなれば「.avif」を追加することで、おそらく AVIF 形式の画像も Lightbox できるんじゃないかと思います。

あとがき

今回は「Webp 形式の画像に対応した Lightbox プラグイン Easy Fancybox」を紹介しました。Webp 対応で、これだけ軽量でシンプルな使い勝手の Lightbox プラグインはあまり見かけないので貴重なプラグインだと思います。

因みに、本記事の本文内で掲載している画像は全て Webp 形式ですので、Easy Fancybox プラグインのデモも兼ねた記事となっております。