2024年8月7日 / 最終更新日 : 2025年6月11日対馬俊彦 WordPress

【2025年最新版】プラグインなしで WordPress で Lightbox を使う方法

WordPress 6.4 以降はプラグインなしで（ノーコードで）Lightbox を使える

WordPress 6.3 の頃まで WordPress で画像をクリックしたときにエフェクト付きで画像を拡大表示したい場合、Responsive Lightbox や Simple Lightbox などの Lightbox プラグインを使う必要がありました。スキルがある人はプラグインを使わずに独自のコードを書いて Lightbox エフェクトを実装していました。

WordPress 6.4 になって、画像ブロックに Lightbox 機能が追加されました。この機能を使うことにより、プラグインなしで、そしてノーコードでかんたんに Lightbox が使えるようになりました🎉

画像に Lightbox 効果を設定する手順

手順を以下に示す通り、設定はかんたんです。

※下記に掲載してある設定画面は WordPress 6.8.1 のものです。

① 画像を追加

拡大表示したい画像をコンテンツに追加します。

② 解像度を中に設定

図に示す通り、追加した画像の解像度を中に設定します。

③ リンクを設定

図に示す通り、リンクボタンをクリックして [クリックして拡大] を選択します。

画像をクリックするとエフェクト付きで拡大表示します

ギャラリーにも使える

上記の手順を繰り返すことにより、ギャラリーにも Lightbox エフェクトを設定することができます。

プラグインなしでもこれくらいのものをかんたんに作れるようになったのはありがたいですね。

ギャラリー作成時の注意点

WordPress の画像ブロックの Lightbox 機能を使ってギャラリーを作るときの注意点（制約事項）があります。

アスペクト比を設定しない
アスペクト比を変更すると、クリックして拡大したときにそのアスペクト比で表示されて、その結果、元画像の一部が欠けてしまいます。Instagram 風にアスペクト比 1/1 でサムネイルを並べたいときなどは悩ましいです。
縦横比を揃えて画像を用意する
結局、上記のアスペクト比と同じことなのですが…
ギャラリーの画像に異なる縦横比が混在する場合、元画像と違うアスペクト比でサムネイルが表示されて、拡大したときに元画像の一部が欠けてしまいますので、同じ縦横比の画像を用意してギャラリーを作るのが望ましいです。

【2025.1.18 追記】サイト全体の画像に Lightbox 効果を適用するやり方

ブロックテーマを使っている場合に限られますが、以下の図に示す手順で画像ブロックの設定を変更すればサイト全体の画像に Lightbox 効果を適用することができます。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら