FedExの飛行機

WordPressに【WP Slimbox2】を導入して画像をLightbox風に表示

この記事の所要時間: 310

何も考えずに画像をアップロードしてたら後からスゲー面倒くさかったぞおい。やっぱり画像は縮小してアップロードしないとダメだね。っとそんな私の無計画ブログ、mirusika.comです、皆様いかがお過ごしでしょうか。クリスマスが終わるともう幾つ寝るとお正月なモードに突入ですね。クリスマスが終わったとしても今度は初詣などの行事もカップルイベントと化しておりまして、なんだコンチキショーな感じが2013年も待っていそうですが、変わらず平常心でブログ更新して行きたいと思います。

さて今回はブログに掲載されている画像をLightbox風に表示させたいと思います。

 

Lightboxってなによ

サイトやブログに掲載されている画像は、元のデータから縮小されたものが表示されていることが多いです。で、画像をクリックすると元のデータへ移動して、縮小前の画像を参照できると、こういう流れ良くありますよね。「クリックすると大きな画像が表示されます」みたいなアナウンスが付いてたりすることもありますね。クリックしたのに大きな画像が表示されないサイトおよびブログはマヤ暦の滅亡説と共に、フォトンベルトか何かに巻き込まれて消し飛んでいただきたいのは私だけでしょうか。ともかくそんな形で元の画像データを参照する場合はページを移動する必要があるんですよね。これをせずとも画像を表示できるのがLightboxというスクリプトなんです。

LigthboxとはWEBブラウザで同一画面上に画像を上乗せする形で表示させるJavascriptの事を言います。数年前から良く見かけるタイプで、画像をクリックすると黒色半透明の背景が画面を覆い、その上に拡大画像が表示されるスタイルを実現するためのスクリプトですね。尚、画像コンテンツが複数ある場合はクリックすると次の画像が表示されたりと何かと便利な気がします。が、殆どは見た目の良さから導入されてる所が多いような気もします。ともあれ、このLigthbox処理をWordpressに導入できるプラグインがWP Slimbox2です。

プラグインのダウンロードはこちら:WP Slimbox2

このプラグイン、何とインストールして有効化するだけでWordpressに投稿されている内容の画像へ、ほぼ自動的にLightboxの処理を適用させます。これはビックリした。めっちゃ楽。でも別の所で問題が発生したんだけど、それはまたの機会に。

試しに以下の画像をクリックしてみてください。

FedExの飛行機

空港でパチリ。もうちょい望遠域欲しいな…。

あ〜こういうヤツか、こうなるのがLightboxっていうのね、と分かっていただけるかと思います。見た目的には気持ちいいですよね。ユーザビリティ的にどうなのかは、また別途検証が必要かと思いますし、サイトやブログの雰囲気によっては合わない場合もあるかと思いますので、簡単に導入できる分、導入前に検討は必要かと思います。またその他のWordpressプラグインと相性が悪い場合もあるみたいですので、動作検証も必要かと思います。

ともあれ、いつも通り[ダッシュボード]-[プラグイン]-[新規追加]からWP Slimbox2を検索してインストール、有効化するだけでLightboxの効果が導入できますので、気軽に試すことができるのもうれしいですね。ぜひ一度試してみてはいかがでしょうか。

それでは、これにて。

※追記(2012/12/28):モバイルのブラウザで表示させると見辛いことこの上ないので、PCでのみ動作するように修正しました。


コメントを残す