WP-lightpop 画像や動画をlightbox風に表示（ボップアップ拡大)
2014/08/18
WP-lightpopは画像をlightbox風に表示してくれるプラグインです。
画像だけでなくYouTubeなどの動画サイト、各種動画ファイル、WordpressプラグインVideoPop+で管理している動画ファイルを lightbox 風に表示する事が可能になります。
lightbox風と言うとちょっと分かりにくいかもしれませんが、画像などをクリックすると拡大してポップアップするようなイメージで表示される感じですね。
WP-lightpopの特長は？
- 画像をlightbox風に表示してくれる。
- 画像だけでなくYouTubeなどの動画サイトなどにも対応。
- 日本人の製作なので設定が日本語に対応している。
などの特長があります。lightbox化するプラグインは多数あるようですが、動画サイトに対応している事や日本語での設定画面など、利便性の高いプラグインであると言えますね。動画サイトもYouTubeだけでなく、dailymotionなどにも対応しているようです。
WP-lightpopをインストールし有効化する
WP-lightpopをインストールしてみましょう。インストールの方法は他のプラグインと同じです。
- 管理画面のメニュー＞プラグインをクリック。
- 上部にある新規追加クリックし検索窓にWP-lightpopと入れます。
- WP-lightpopがでてくるのでインストールしましょう。
- 有効化します。
WP-lightpopを使ってみる
それではWP-lightpopを使ってみることにします。設定はあらかじめデフォルトでされているので、画像とYoutubeの動画に関しては何も弄る必要がありません。
まずは画像を表示させる方法です。これは今まで通り拡大表示させるように画像を投稿すればいいだけになります。拡大表示される時にハイライト表示されるようになっています。
WordPressの投稿画面でメディアを追加します。
リンク先をメディアファイル、サイズをサムネイルか中に指定し画像を投稿する。
これで画像をクリックした時にハイライト表示されます。
WP-lightpopの設定を弄ってみる
WP-lightpopの設定を弄ってみることにしましょう。設定の方法はWP-lightpop製作者のサイトを見るのが一番いい方法ではあります。日本語のサイトですのでしっかり読めば分かるとは思います。
WP-lightpopのサイトはこちらです。
WP-lightpopの設定を変えるにはWordpresssの管理メニュー＞設定＞LightPopをクリックします。いくつか設定を試してみることにします。
WP-lightpopの使い方 WordPressで画像や動画のハイライト表示（画像を拡大ポップアップ）
●フレームの枠を変えてみる
フレームの枠の種類を変えるには設定画面のフレーム枠の種類のところで選択を変更します。種類がいろいろあるので試して気にいったものを使いましょう。
●使える動画サイトを追加してみる。dailymotionを追加。
デフォルトではyoutubeだけが設定されています。対象のXHTML要素という項目に設定を追加していくと他の動画サイトなども使えるようになります。
youtubeの設定は
a[href*=”.youtube.com/watch”]
となっています。
ですので
a[href*=”.dailymotion.com/video”]
と追加してみました。
他にはニコニコ動画なども設定できるようにはなっているようですね。youtubeの設定を参考にアドレスの一部を.dailymotion.com/videoのように抜き出して””の間に入れるといいようです。