Soweeb!

アフィリエイト広告を利用しています。

web製作 wordpress wordpressプラグイン

WP-lightpop 画像や動画をlightbox風に表示(ボップアップ拡大)

投稿日:2013年5月14日 更新日: 4,663 ビュー

s00006WP-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のように抜き出して””の間に入れるといいようです。

-web製作, wordpress, wordpressプラグイン

関連記事

ワードプレスでカテゴリー別にサイドバーを変更する方法 WooSidebarsプラグイン

ワードプレスを使っているとサイドバーに広告、メニューリンクや人気記事を掲載する事もあるかと思います。専門ブログの場合にはサイドバーは同じ内容で統一されていれば事足りるかもしれません。 しかし、いろいろ …

wordpressを5.0.1に更新したら投稿画面が使いにくい場合の対処方法 旧エディターを使う方法

wordpressを5.0.1に更新してみたら、新しい投稿方式になっていて非常に使いにくかったです。 ですので従来の投稿方式に変更してみる事にしました。 更新後の画面で紹介が現れる wordpress …

wordpressでスマホとpc用のテーマ(デザイン)を別々にする方法 Device Theme Switcherプラグイン

最近はスマートフォンでのアクセス数も増えているサイトオーナーさんも多いかと思います。スマートフォンはpc用のサイトも見れますが、基本的に横幅が狭いのでスマートフォン用のデザインを用意する方も多いかと思 …

人気、おすすめのSEOに強いテンプレートは?ワードプレス用(テーマ)

ワードプレスでブログのデザインを決める時にはテーマを選んで変更してしていきます。wordpressを使っている方なら常識的な事ではあります。 ワードプレスをインストールするとデフォルトのテーマがいくつ …

jetpack WordPress.comの機能をインストール版で使うプラグイン

jetpackというwordpressのプラグインがあります。Wordpress.comでは無料のブログサービスを使う事ができるプラグインです。 WordPress.comで使える機能をインストール版 …

まだデータがありません。