WordPress

wordpress

WordPressの画像をポップアップするLightboxプラグイン【Lightbox Plus ColorBox】

インターネットをしていて、ホームページやブログの画像をクリックすると、画像が飛び出すのを見たことがありますか?このような画像の見せ方もデザイン的にも機能的にも非常に効果的なので、どんどん使っていきたい機能のひとつです。

WordPressならプラグインで簡単に実現可能ですよ。

Lightboxとは?

画像が飛び出すって言われてもイメージがわかないこともあるかもしれないので、まずは試しにこのイルカの画像をクリックしてみてください。

dolfin

どうでしたか?

背景が半透明でイルカの画像が飛び出てきましたね。

 

このように画像をクリックすると画像を強調して見せることもできるし、いちいち新しいウインドウで開くこともない。つまり、訪問者の操作性も向上し、訪問者に優しいブログ作りに役立ちます。見え方もなんかプロっぽい感じがして、「すごそう」なイメージもありますね。

このような機能のことを「Lightbox」と呼ぶんだけど、WordPressだとプラグインを入れるだけで簡単に使うことができるんです。このLightbox系プラグインってかなりたくさんあるけど、ここでは私も使用している「Lightbox Plus Colorbox」というプラグインで解説していきます。

色々試してみたけど、このプラグインが一番安定して使いやすい印象です。

Lightbox Plus Colorboxのインストールと設定方法

まずはプラグインの検索から「Lightbox Plus Colorbox」をインストール。

pic0299

インストールが完了したら「有効化」すればOK。

pic0300

WordPressダッシュボードのサイドバーの「外観」の中に「Lightbox Plus Colorbox」が追加されているのでクリック。

pic0302

プラグインの設定画面で「Styles」タブをクリックし、「Lightbox Plus Colorbox Style」からお好みのパターンを選択。ここで選んだパターンで表示されるようになるので、色々試して選ぶといいですね。

pic0303

次に「Primary Lightbox Settings」の「General」タブから各項目を設定していきます。

  • Transition Type 画像の表示方法(お好みで選択)
  • Resize Speed 画像を表示する早さを選択
  • Overlay Opacity 背景の不透明度を選択
  • Pre-load images イメージ画像を事前に読みこんでおくかどうか

pic0304

次に「Size」タブから、表示させる画像のサイズを入力します。

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

pic0305

次に「Interface」タブから表示した画像の閉じ方を決めていきます。

  • Overlay Close 画像の外側をクリックすると閉じる
  • ESC Key Close ESCキーを押すと閉じる

pic0306

ここまでで画像の表示については設定完了となります。

合わせてテキストリンクからもポップアップさせたいときは、以下の設定をしておくといつでも有効になるのでオススメですよ。

「Other」タブから、「Auto-Lightbox Text Links」にチェックを入れます。

pic0307

これで基本的な動作は問題無くできるようになっています。試しにブログの記事から画像をクリックしてみてください。

また、テキストリンクの場合は、以下のようにテキストに画像リンクが設定されているときにクリックされると画像をクリックしたときと同じようにポップアップしてくれます。

イルカのジャンプ

 

こんな感じで画像ひとつでも見せ方を工夫するとカッコいいですよね。設定も英語とはいえ、難しいことは無いので積極的に使ってみてください。

 

関連記事

  1. wordpress

    YARPPのサムネイル画像が潰れる状況を改善する方法

  2. wordpress

    安全にWordPressを使用するためのセキュリティ対策方法

  3. wordpress

    直接CSSを編集せずにカスタマイズできるSimple Custom C…

  4. wordpress

    【WordPress】合わせて読みたい記事を表示するプラグイン「YAR…

  5. wordpress

    Easing Sliderプラグインの設定方法【WordPress】

  6. wordpress

    WP-DBManagerでWordPressを自動バックアップ

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP