Soweeb!

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

      2014/08/18

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

大谷翔平選手ホームランで50-50達成!動画など、1日で49、50、51号3本のホームランの大活躍、盗塁51も達成で51-51に!

大谷翔平選手ですが48ー49で迎えた今日の試合で、一気に前人未踏の50-50を達 …

ホリエモン「業務用の米は普通に入ってくる」米は足りてないわけじゃない?

最近スーパーに行っても米が手に入らない状況が続いてます。 今日スーパーに行ってみ …

選挙掲示板は税金の無駄遣い?批判殺到のNHK党ポスタージャックが掲示板の注目度を上げる皮肉な結果に

NHK党のポスタージャックがネット上で話題になっており、概ね批判が多いようには感 …

大谷翔平2024年3試合連続の11号ホームラン、動画など

2024年日本時間5月7日のドジャース対マーリンズの試合ですが、大谷選手が1回裏 …

大谷翔平2024年9号、10号ホームラン映像、動画、海外の反応リンクなど

大谷翔平選手が2024年の5月に入ってから調子がいいようです。 日本時間の5/6 …