たなブログ WordPress入門講座

画像をライトボックス表示にするプラグイン WP jQuery Lightbox

WordPressトピックス

　WordPress標準の設定では、縮小した画像を原寸表示する時、少し見づらかったりします。

　画像の表示をライトボックス表示にしてくれる
WP jQuery Lightbox プラグインを導入して画像を見やすくしましょう。

ライトボックス形式で表示する

　ライトボックス形式は下の画像のような画像の表示方法です。画像をクリックするとサイトを表示したウィンドウの内容が薄暗くなり中央に画像のフルサイズが表示されます。

　ライトボックス形式で表示することで、元のサイトから移動せずに画像のフルサイズが
見れるようになります。 ライトボックス形式は、「WP jQuery Lightbox」というプラグインを導入することで簡単に使用することが出来ます。

このプラグインは、導入方法はとても簡単です。インストールして「有効化」すれば、機能します。

画像をクリックしてみてください。ライトボックス化して表示されます。 

　もしライトボックスの背景の透明度を変えたい場合は、cssで変更することができます。
 次の記述をstyle.cssに追加してみてください。

/* ライトボックスの背景の透明度 */
#overlay  {filter:alpha(opacity=30)!important;
  opacity:0.3!important}

 標準では透過度0.6に指定されていますので上の値をお好みで変更しましょう。

アイキャッチ画像など記事本文以外の画像をライトボックス表示したい場合

　「WP jQuery Lightbox」のプラグインは記事の本文以外の画像は、ライトボックス表示しません。

アイキャッチ画像など記事本文以外に置いた画像をライトボックス表示したい場合は、
下の記述のように画像へのリンクに「rel=”Lightbox”」というrel属性を追加する必要があります。

<a href="http://blog.anekipedia.com/wp-content
/uploads/topic1.jpg" rel="lightbox" >
<img src="http://blog.anekipedia.com/wp-content
/uploads/topic1-270x234.jpg" alt="" width="270"
 height="234" /></a>

このようにすることで、ライトボックス表示が可能になります。

登録タグ: WordPressトピックス　・ WP jQuery Lightbox　・ プラグイン　・ ライトボックス　・ 導入　・ 設定　 | 2012年5月14日