Webサイトを制作していて、クライアントからこんな要望をもらったことはありませんか？

「実績紹介の画像、小さくて見えないからクリックしたら大きく開くようにしたい」「ギャラリーの写真をタップしたら、スマホの画面いっぱいに表示させたい」

画像をポップアップで拡大表示させるこの仕組みを、Web用語で「ライトボックス（Lightbox）」と呼びます。通常は専用のプラグインを探してきて設定する必要がありますが、実はElementor にはこのライトボックス機能が標準で備わっています。今回は、プラグインを増やさずに、たった数クリックで画像を拡大表示させる方法と、サイト全体での一括設定について解説します。

個別の画像にライトボックスを設定する

まずは、ページ内に配置した1枚の画像をクリックで拡大できるように設定してみましょう。 ここで初心者が最もつまずきやすい「ある設定」を忘れないのがポイントです。

⚫︎ 設定手順

1. 拡大させたい「画像ウィジェット」を選択します。

2. 左パネルの「コンテンツ」タブを開きます。

3. 「リンク」のプルダウンを、デフォルトの「なし」から「メディアファイル」に変更します。

4. リンクの下に「ライトボックス」という項目が現れるので、「はい」を選択します。

たったこれだけです！ プレビュー画面で画像をクリックしてみてください。背景がフワッと暗くなり、画像が画面中央に大きく表示されたはずです。

サイト全体でコントロールする

「いちいち画像ごとにライトボックスを『はい』にするのが面倒くさい…」 「サイト内の画像は、基本的にすべてクリックで拡大できるようにしたい」

そんな時は、Elementor のサイト設定から一括でコントロールするのが正解です。

1. 編集画面左上のハンバーガーメニュー（三本線）をクリックし、サイト設定を開きます。

2. 設定項目の中にある「Lightbox」をクリックします。

3. 一番上の画像のライトボックスを「オン」にします。

これをオンにしておけば、先ほどの画像ウィジェットの設定でライトボックスを「デフォルト」にしておくだけで、リンクを「メディアファイル」にした画像はすべて自動的に拡大表示されるようになります。

まとめ

• 設定は画像ウィジェットのリンクを「メディアファイル」にするのが鉄則。
• 「サイト設定 ＞ Lightbox」から、サイト全体の一括オン・オフやデザインの変更ができる。

わざわざ重いギャラリー用プラグインを追加しなくても、Elementor の標準機能だけでここまで美しく実装できます。 ポートフォリオサイトや、飲食店のお品書き、細かい図解を見せたい時などに大活躍する機能ですので、ぜひご自身のサイトにも取り入れてみてください！