WordPressカスタマイズ PR

WordPressのLightboxプラグイン「Responsive Lightbox」を使ってみる

記事内に商品プロモーションを含む場合があります

以前はてなブログを使ったことがあり、そこで画像を配置した時に自動的に設定されていたLightbox(画像が大きく中央に表示されバックは薄くなる)が気に入っていたのでWordPressでも同じことができないかとプラグインを検索したらたくさんありました。中でも良さそうだったのが「Responsive Lightbox by dFactory」というプラグインで、2016年9月現在20万件の有効化がされていて★も5です。早速インストールしてみました。

効果を選ぶ

プラグイン > インストール済みのプラグイン > レスポンシブLightbox > 全般設定を開きます。

144

一番上にあるLightboxスクリプトの6種類の中から効果を選びます。これだけでOK!

1.prettyPhoto

146

インスタントカメラ風。画像の上にタイトルが表示されます。右下の×印でなくても画像外をクリックすることで画像を閉じられます。バックは暗くなりますがうっすら見えています。

2.SwipeBox

147

画面内右上に×印が表示(これはブラウザの幅を狭めて撮影してます)され、これ以外のクリックでは閉じることができません。バックは真っ黒に。

3.FancyBox

148

画像が白で縁取られ、バックは少しだけ暗めに。右上の×印でなくても画像外をクリックすることで画像を閉じられます。「FancyBox for WordPress」というプラグインも試してみましたが、これとまったく同じで独立しているものというだけでした。

4.Nivo Lightbox

149

当ブログで使用中。ひとつ上のFancyBoxとほぼ同じで、画像の縁取りがないバージョン。バックはやや暗め。

5.Image Lightbox

14a

バックはそのまま、画像が拡大表示されるだけ。どこをクリックしても画像を閉じます。

6.TosRUs

14b

バック暗め。うまく撮れませんでしたが画面内右上に×印が出てそこをクリックする以外戻れません。他はこのままスクロールが可能で画像も付いてきますが、これのみスクロール無効になります。

スライドショーなど細かな設定が必要な場合はLightbox設定の項目を確認してください。

画像を貼り付ける

画像を貼り付ける際にはリンク先を「メディアファイル」に設定します。

14c

既存の画像には編集から設定を変更します。

14d

動かない時に試して欲しいこと

WordPressのプラグインでLightboxを実装する為のプラグイン「レスポンシブLightbox」。
インストール後有効化してみたものの、画像をクリックしても動作しない。そんな時は設定を確認してみてください。

プラグイン > インストール済みのプラグイン > レスポンシブLightbox > 設定を開きます。
下の方に「場所のロード」という項目がありますので、初期値のヘッダーからフッターへ変えます。これでLightboxスクリプトがヘッダーにあったことにより起こっていた不具合は回避できるかもしれません。

143

 

はてなブログに近づけるならFancyBoxかNivo Lightbox…かな?当ブログではひとまずNivo Lightboxでいきたいと思います。