シェアする

画像をふわっと拡大させる「Lightbox Plus Colorbox」

シェアする

thum056
画像をふわっと拡大させる「Lightbox Plus Colorbox」

スポンサーリンク

「Lightbox Plus Colorbox」とは?

昔だったら画像をクリックすると画像が別ページで表示されたりしてたものですが、これをページを移動させずに未来的なポップアップで表示するプラグインのひとつ。それが「Lightbox Plus Colorbox」です。

このプラグインを利用すれば画像がアニメーションしながら本来のサイズで表示されつつバックが薄暗くなり、再度画像の外側をクリックすれば記事に戻る。と、記事を読むテンポが悪くなるのを極力押さえて画像もチェックできるというすぐれもの。見てて楽しいですし。

画像をいっぱい使った記事が多い当サイトとしても、利用していかない手はありません。ハイ。

「Lightbox Plus Colorbox」をインストール

さっそく「Lightbox Plus Colorbox」インストールしていきます。

「プラグイン」→「新規追加」で「Lightbox Plus Colorbox」を検索して「いますぐインストール」
画像をふわっと表示してくれる「Lightbox Plus Colorbox」01

恐れず「プラグインを有効化」
画像をふわっと表示してくれる「Lightbox Plus Colorbox」02

これで「Lightbox Plus Colorbox」は導入完了です。
これだけでもう画像がポップアップするサイトができあがっています。

「Lightbox Plus Colorbox」設定画面

ではでは「Lightbox Plus Colorbox」の検索画面を見てみましょう。

「ツール」の中に「Lightbox Plus Colorbox」の項目が追加されているのでクリック。
画像をふわっと表示してくれる「Lightbox Plus Colorbox」03

す、すごい設定項目量です…
画像をふわっと表示してくれる「Lightbox Plus Colorbox」04

いや、これは自由度の高さの表れであり、いろいろ各所いじってサイトといったり来たりするのも楽しかったりします。

今回は自分の設定をお見せつつ、比較的気軽に変更できる箇所を紹介していこうかと思います。

ポップアップデザインの変更

「Lightbox Plus Colorbox – Base Settings」の「styles」タブをクリック。
画像をふわっと表示してくれる「Lightbox Plus Colorbox」07

「styles」タブの中の「Lightbox Plus Colorbox Style: 」の横でデザインを変更できます。
「Lightbox Plus Colorbox Style: 」の下の画像でどういったデザインかが分かります。

私は映画館みたいな雰囲気がなんか良かったので「Blackbox」にしました。

アニメーションのスピードと背景の暗さの変更

「Lightbox Plus Colorbox – Primary Lightbox Settings」の最初のタブ、「General」をクリック。
画像をふわっと表示してくれる「Lightbox Plus Colorbox」08

Resize Speed:

ポップアップしてくるスピードを変更します。数値が大きいほど画像が開かれるのが遅くなります。
ためしにデフォルトの300のところを3000まで上げると、すごく、じらされます…

Overlay Opacity:

画像がポップアップされている時のバックの色の濃さを設定する所です。
ためしに「styles」を「Blackbox」の状態で、「Overlay Opacity: 」を100%にすると画像の後ろが真っ暗に…

ポップアップ時に画像を原寸大で表示させたい!

「Lightbox Plus Colorbox – Primary Lightbox Settings」の「Size」をクリック。
一番下の「Resize:」のチェックを外すことで、自動的に画像のサイズが変更されなくできます。
画像をふわっと表示してくれる「Lightbox Plus Colorbox」09

ウインドウよりも大きいサイズの画像を開いた場合はスクロールバーがちゃんと表示されるので安心です。

このポップアップ時に画像をリサイズさせない設定は、同じようなプラグインだと備わっていないものもあるので、これは「Lightbox Plus Colorbox」の長所といえますね。

大きくて綺麗な画像を取り扱いしている場合は「Lightbox Plus Colorbox」を利用してみてはいかがでしょうか。

スポンサーリンク

シェアする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)