画像をライトボックス表示にするプラグイン WP jQuery Lightbox
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>
このようにすることで、ライトボックス表示が可能になります。
この記事へのコメント
【コメントの投稿の仕方について】
このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
自分の各プロフィールでコメントすることが出来ます。
なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
（入力したメアドはコメント投稿には表示されません。）
また、コメント欄には画像を張ることも出来ます。
なにか書いていただけると管理人が嬉しがります。