Soweeb!

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

web製作 wordpress wordpressプラグイン

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

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

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プラグイン

関連記事

人の役に立つ3つのコンテンツで人気ブログにする方法

人気がでる記事は何なのか?を考えてみました。人を引き付ける記事はやはり人が求めるものを書くという事が基本になるとは思います。それは人の役に立つという事ではあるのです。 他ブログさんを見てみると人気にな …

html4とhtml5は大きな違いがあるのかな?

html5が話題になってるし、html5をマスターしたいな~と思いました。いや話題ななってるのかどうかはよく分かりませんが、html5を使ったwordpressのテーマもあったりで、html5をマスタ …

WordPressで続きを読むの下の記事中にアドセンスを設置する方法 Master Post Advertプラグイン

WordPressでgoogle adsenseなどの広告を使っている方はどの辺りにアドセンスの広告などを配置しているでしょう。記事下は1つのセオリーとして配置している場所の1つですね。収益の事などや …

エックスサーバーにwordpressをインストールしてみた感想と評価

ワードプレスを利用する場合にはwordpressをインストール可能なサーバーが必要になります。みなさんどのレンタルサーバーを利用すればいいのか悩むところではないでしょうか。 レンタルサーバーは数多くの …

WP Social Bookmarking Light、Facebook「いいね!」のズレを修正する方法

wordpressのソーシャルボタンを設置する方法としてWP Social Bookmarking Lightというプラグインがあります。 このプラグインを導入するだけでいろいろなSNSのソーシャルボ …

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