![](https://cxg-design.jp/wp-content/uploads/2024/06/simplelightbox_thumb02.png)
Simple Lightboxとギャラリーで、ライトボックスギャラリーを作成
以前のBLOGで、ACFの画像フィールドとLightboxで、 ギャラリーを作成する方法を紹介しました。今回は、ライトボックスプラグインSimple Lightboxとブロックエディターのギャラリーで、ライトボックスギャラリーを作成する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/0df1529efa6f7a1d2a29ba14511137d1.png)
出典 : Simple Lightbox
今回のDEMOも、フランス旅行のギャラリーです。
16枚の画像をギャラリーにしました。画像をクリックすると、ライトボックスで表示され、左右の矢印で次の画像が表示されます。
設定
Simple Lightboxプラグインをインストール、有効化します。編集画面を開き、ブロックエディターのギャラリー>メディアライブラリをクリックします。
ギャラリーに入れたい画像を選択し、ギャラリーを作成ボタンをクリックします。ギャラリーを編集画面に移行するので、画像をクリックし、タイトルを入力していきます。全て入力したら、ギャラリーを挿入ボタンをクリックします。編集画面にギャラリーブロックが挿入されます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/35df0c8501b06a822e8be3d8a352f889.png)
ブロックエディターのギャラリー>メディアライブラリをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/db04d55cfd4035c4146091f2d0425b29.png)
ギャラリーに入れたい画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/5a0bc3e44789d2558058eedbeaf0c2ea.png)
画像をクリックし、タイトルを入力
![](https://cxg-design.jp/wp-content/uploads/2024/06/0fcb96c1de8a93b8df651219af4fc446.png)
編集画面にギャラリーブロックが挿入
ブロックの編集をしていきます。ギャラリーブロックを選択し、カラムを4に変更します。リンク先をメディアファイルに変更したら完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/c734814bb6101ee633b31aa6ba071b34.png)
カラムを4に変更
![](https://cxg-design.jp/wp-content/uploads/2024/06/ea41c43d29fd64a66451c6be23753459.png)
リンク先をメディアファイルに変更
以上で、今回の説明は終了です。今回の方法であれば、ブロックエディターでビジュアルを確認しながら編集できます。ギャラリーを編集画面で順番を入れ替えできるます。ブロック編集のランダムな順番にチェックを入れると、ロードの度に画像の並び順が変わり、Simple Lightboxも連動します。