Webサイトを制作していて、クライアントからこんな要望をもらったことはありませんか？
「実績紹介の画像、小さくて見えないからクリックしたら大きく開くようにしたい」「ギャラリーの写真をタップしたら、スマホの画面いっぱいに表示させたい」
画像をポップアップで拡大表示させるこの仕組みを、Web用語で「ライトボックス（Lightbox）」と呼びます。通常は専用のプラグインを探してきて設定する必要がありますが、実はElementor にはこのライトボックス機能が標準で備わっています。今回は、プラグインを増やさずに、たった数クリックで画像を拡大表示させる方法と、サイト全体での一括設定について解説します。
個別の画像にライトボックスを設定する
まずは、ページ内に配置した1枚の画像をクリックで拡大できるように設定してみましょう。 ここで初心者が最もつまずきやすい「ある設定」を忘れないのがポイントです。
⚫︎ 設定手順
- 拡大させたい「画像ウィジェット」を選択します。
-
左パネルの「コンテンツ」タブを開きます。
-
「リンク」のプルダウンを、デフォルトの「なし」から「メディアファイル」に変更します。
- リンクの下に「ライトボックス」という項目が現れるので、「はい」を選択します。
たったこれだけです！ プレビュー画面で画像をクリックしてみてください。背景がフワッと暗くなり、画像が画面中央に大きく表示されたはずです。
サイト全体でコントロールする
「いちいち画像ごとにライトボックスを『はい』にするのが面倒くさい…」 「サイト内の画像は、基本的にすべてクリックで拡大できるようにしたい」
そんな時は、Elementor のサイト設定から一括でコントロールするのが正解です。
- 編集画面左上のハンバーガーメニュー（三本線）をクリックし、サイト設定を開きます。
-
設定項目の中にある「Lightbox」をクリックします。
-
一番上の画像のライトボックスを「オン」にします。
これをオンにしておけば、先ほどの画像ウィジェットの設定でライトボックスを「デフォルト」にしておくだけで、リンクを「メディアファイル」にした画像はすべて自動的に拡大表示されるようになります。
まとめ
- 設定は画像ウィジェットのリンクを「メディアファイル」にするのが鉄則。
- 「サイト設定 ＞ Lightbox」から、サイト全体の一括オン・オフやデザインの変更ができる。
わざわざ重いギャラリー用プラグインを追加しなくても、Elementor の標準機能だけでここまで美しく実装できます。 ポートフォリオサイトや、飲食店のお品書き、細かい図解を見せたい時などに大活躍する機能ですので、ぜひご自身のサイトにも取り入れてみてください！
