記事の詳細

自分のWordPressブログで画像や動画をポップアップで表示させたいと思ったとき、Lightbox系のプラグインを導入することで表現可能になります。そのLightbox系プラグインには色々あって「WP-lightpop」や「Shadowbox JS」など使ってみたのですが、「Lightbox Plus ColorBox」が一番使い心地がよかったので紹介したいと思います。

例えば以下の画像をクリックすると、ポップアップで画像が表示されると思います。これは「Lightbox Plus ColorBox」を使って実装しています。

「Lightbox Plus ColorBox」のインストール方法

1.WordPressのダッシュボードから「プラグイン」「新規追加」をクリックして「Lightbox Plus ColorBox」を検索します。

2.「Lightbox Plus ColorBox」が見つかるので「いますぐインストール」の文字をクリックします。

3.インストールが完了するので「プラグインを有効化」します。これでWordpress管理画面の「外観」「Lightbox Plus ColorBox」が追加されます。

「Lightbox Plus ColorBox」の設定と導入方法

初期設定のままでの使用できないことはないですが、ポップアップ表示があまりスムーズではないので設定しておいたほうがよいと思います。設定は「外観」⇒「Lightbox Plus ColorBox」から行います。

画像関連の設定とポップアップで表示させる方法

画像をポップアップさせるための設定を行います。主に以下のような部分を変更すればよいと思います。

「Base Settings」「Styles」から、好みの表示スタイルを選択します。

「Primary Lightbox Settings」「General」から以下の項目を好みに合わせて変更します。

  • Transition Type:表示方法(お好みで)
  • Resize Speed:画像を表示(リサイズ)するスピード
  • Overlay Opacity:オーバーレイ(背景)の不透明度
  • Pre-load images:イメージを事前に読み込むか

「Primary Lightbox Settings」「Size」で表示するBOXのサイズを指定してあげます。

  • Width:幅を指定します
  • Height:高さを指定します
  • Inner Width:内側の幅を指定します
  • Inner Height:内側の高さを指定します
  • Initial Width:初期の幅を指定します
  • Initial Height:初期の高さを指定します
  • Maximum Width:最大の幅を指定します
  • Maximum Height:最大の高さを指定します
  • Resize:チェックを入れておくと、大きいサイズの画像でも画面内に入るようにリサイズしてくれます。

「Primary Lightbox Settings」「Interface」で画像を閉じる方法を追加します。

  • Overlay Close:画像の外側をクリックしたら閉じるようにする
  • ESC Key Close:「ESCキー」を押したら閉じるようにする

「Primary Lightbox Settings」「Other」でテキストリンクの設定をします。

  • Auto-Lightbox Text Links:テキストリンクにも画像のポップアップを有効にする

とりあえずはこのくらいでOKです。他の部分は必要に応じて変更してみてください。

テキストリンクでのポップアップは以下のように行います。

<a href="画像のURL">テキストリンク</a>

画像でポップアップする場合は以下のように行います。

<a href="大きい画像のURL"><img src="サムネイル画像のURL" /></a>

動画関連の設定とポップアップで表示させる方法

動画をポップアップで表示させるには、画像とは別のLightboxを用意します。まず「Base Settings」⇒「General」から、「Use Secondary Lightbox」にチェックを入れます。

これで保存すると、設定画面に「Secondary Lightbox Settings」が追加されます。後は画像と同じように好みに合わせて表示方法を変更してみてください。

動画をポップアップさせるには、aタグにclass属性を指定してあげます。class属性は「Secondary Lightbox Settings」⇒「Other」から変更可能で、初期設定では「lbp_secondary」となっています。

※動画のIDには「http://www.youtube.com/watch?v=○○○」の○○○の部分を貼り付けてください。

テキストリンクでYouTube動画をポップアップさせるには以下のように行います。

<a href="http://www.youtube.com/embed/動画のID" class="lbp_secondary">テキストリンク</a>

画像(サムネイル)でポップアップする場合は「i.ytimg.com」からサムネイル画像を取得できます。「0.jpg」は480×360サイズ、その他のjpgは120×90サイズでサムネイルを取得してくれます。

  • http://i.ytimg.com/vi/動画のID/default.jpg
  • http://i.ytimg.com/vi/動画のID/0.jpg
  • http://i.ytimg.com/vi/動画のID/1.jpg
  • http://i.ytimg.com/vi/動画のID/2.jpg
  • http://i.ytimg.com/vi/動画のID/3.jpg

YouTube動画のサムネイル画像から、ポップアップで表示させるには以下のように記述します。

<a href="http://www.youtube.com/embed/動画のID" class="lbp_secondary"><img src="http://i.ytimg.com/vi/動画のID/0.jpg" /></a>




関連記事

ページ上部へ戻る