[WordPress] Lightboxプラグインを「WP jQuery Lightbox」に変えてみた

「WP Lightbox 2」との相性が悪い?

当ブログでは開設当初から、画像のLightbox表示用のプラグインとして「WP Lightbox 2」を使用していました。

一度設定してしまえば特にメンテナンスする必要もないため、導入されている方も多いのではないかと思います。

しかしながら当ブログでは、いつのまにやらこの WP Lightbox 2 の挙動が怪しくなってまいりました。画像表示自体には問題ないのですが、画像表示後にもローディングのクルクルアイコンが残ってしまっていたんですよね(; ・`д・´)

プラグインのソースも少し見てみたのですが、原因はいまいち分からず。他のプラグインや現在使用しているテーマとの相性が悪いのかなぁ…と、しばらく放置していました。

「WP jQuery Lightbox」を入れてみた

そんなわけでこれまで見て見ぬふりをしてきたのですが…先日WPtouchのカスタマイズをしている時に画像表示の遅さも気になってきて「やっぱりこのままじゃ気持ち悪い!」ってことで、思い切って別のプラグインに切り替えることにしました。

さっそくプラグインの検索にて「Lightbox」で検索をかけ、上の方に表示された「WP jQuery Lightbox」とやらを入れてみました。

別のプラグインに切り替える際に懸念していたのが「移行したあとにタグを全部入れ替えないといけないのだろうか…」という点でしたが、WP Lightbox 2 から WP jQuery Lightbox への切り替えに関しては、特に何もせずともそのまま使えました。

設定関連

基本的にはプラグインを有効にするだけでイメージリンクがLightboxで開くようになりますが、当ブログでは設定を少しいじってみたので補足しておきます。

WP jQuery Lightbox

WP jQuery Lightbox 設定

自動的に画像(イメージリンク)にLightbox効果を適応する

チェックを入れると特に設定することなく、本文内の画像リンクをlightboxで表示します。

コメント欄でLightbox効果を有効にする(nofollow属性は無効になります。)

チェックを入れるとコメント欄に画像が投稿された場合にも、lightboxを適用します。

ダウンロードリンクを表示

lightboxに画像のダウンロードリンクが表示されます。

Show image info on top

通常ではlightbox下部に表示される画像の情報を上部に表示します。

スクリーンサイズに合わせて画像を縮小

チェックを入れると、元画像がスクリーンサイズより大きくてもスクリーンサイズに収まるよう表示されます。

Minimum margin to screen edge (default: 0)

画像とスクリーンのmargin。

Animation duration (in milliseconds)

アニメーションの再生時間。値を大きくすると遅くなる。

Slideshow speed (in milliseconds). 0 to disable.

スライドショーの表示速度。

Help text (default: none)

lightboxの下部に入力したテキストが表示される。著作表記とかにつかうのかな?

その他

プラグインの設定には無いのですが、カスタマイズの需要がありそうなものを書いておきます。いずれも「WordPressデザインブック」に記載されていました。

本文以外の画像にもlightboxを適用する場合

WP jQuery Lightbox の適用範囲は、通常では本文内の画像のみとなります。本文以外の画像もlightboxで表示したい場合は、画像リンクの<a>タグに、rel属性を追加し、値を「litebox」に指定すればOKです。

lightboxの背景透明度を変更する

ブログのテーマに合わせて、lightboxの背景透明度を変更したい場合もあると思います。その場合は、スタイルシートの opacity プロパティで変更が可能です。opacity の値はデフォルトで「0.6」が指定されており、値を0にすると透明、1にすると不透明になります。

opacity 0.6(デフォルト)

opacity 0.6(デフォルト)

透明度を変更したい場合は、テーマの style.css に「overlay」idを追加し、opacity プロパティを定義して値を調整します。また、プラグインのcssよりも優先させるため、値のあとに「!important」を付加します。

#overlay{
    filter:alpha(opacity=0) !important;
    -moz-opacity: 0 !important;
    opacity: 0 !important;
}

上記のように定義すると、lightboxの背景は透明になります。

opacity 0

opacity 0

星影

Tech Hunter代表。マルチポテンシャライト。 ガジェット、アニメ、ゲーム、インターネットが好き。

関連記事

特集記事

コメント

この記事へのコメントはありません。

TOP