« »

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

WordPressトピックス


ライトボックス表示するプラグイン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と呼ばれるところのサービスを採用しています。ですので、ここに記述をしてもライトボックス表示はされません。
      少しわかりずらかったかも知れません。

  • 管理人

【コメントの投稿の仕方について】

   このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
  ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
  自分の各プロフィールでコメントすることが出来ます。
  なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
  (入力したメアドはコメント投稿には表示されません。)
  また、コメント欄には画像を張ることも出来ます。


ひと言コメントや、記事の質問や感想など お気軽にお書きください。
  なにか書いていただけると管理人が嬉しがります。