LightPress Lightboxで、シンプルなライトボックスを作成
WordPressには、多くのライトボックスプラグインがあります。今回は、LightPress Lightboxで、シンプルなライトボックスを作成する方法を紹介します。
出典 : LightPress Lightbox
設定
プラグインをインストール、有効化します。サイドメニューのLightbox＞Settingsをクリックします。設定画面が表示されます。
Lightbox＞Settingsをクリック
設定画面が表示
基本的にはデフォルトでOKです。画像周りのボーダーの幅や、背景色などを変更することができます。
デフォルトは、白背景ですが、今回は、色をネイビーに変更しました。また、Show info Barのチェックを外しました。
色をネイビーに変更
| 項目 | 設定値 |
|---|---|
| Border Color | #1b2d70 |
| Overlay Color | #1b2d70 |
| Nav Arrow Color | #1b2d70 |
| Nav Background Color | rgba(0,0,0,.7) |
| Show info Bar | チェック無 |
設定終了後、ページ下の変更を保存ボタンをクリックします。これで設定終了です。
変更を保存ボタンをクリック
設置
画像に対して、リンクを画像に設定したら、ライトボックスで表示されます。今回は、ギャラリーブロックに対して、リンク先をメディアファイルに設定しました。
プレビューを確認します。画像をクリックするとライトボックスで表示され、左右の矢印で、画像が切り替わります。画像は、ループ表示されます。
ギャラリーブロックに対して、リンク先をメディアファイルに設定
プレビューを確認
画像をクリックするとライトボックスで表示
左右の矢印で、画像が切り替わり
複数ライトボックスプラグイン導入時は注意
今回のLightPressは、画像リンクするだけで、ライトボックスが実装されます。設定は簡単ですが、同じような設定のライトボックスプラグインもあります。その場合、ダブって表示されたり、不具合が起きる可能性があるので注意しましょう。
ページ内の画像リンクがループされる
LightPressでは、ページ内の画像リンクしたものがループで表示されます。ページ内で、場所が離れていてもループされるてしまいます。
以上で今回の説明は終了です。矢印が左右固定で表示されるので、使いやすいですね。背景色などの色をデザインに合わせて変更できるので、便利です。レスポンシブデザイン対応なのでSPでも使用できます。
