◆当サイト一押し教材『ルレアプラス』◆

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

    これで基本的な動作は問題無くできるようになっています。

    試しにブログの記事から画像をクリックしてみてください。

     

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

    イルカのジャンプ

     

    こんな感じで画像ひとつでも見せ方を工夫するとカッコいいですよね。

    設定も英語とはいえ、難しいことは無いので積極的に使ってみてください。

     

      ◆アフィリエイトで成功するためのオススメ情報商材◆

      オススメ情報商材ランキング
      実際に私が実践しているアフィリエイトで稼ぐための情報商材をランキング形式でご紹介します。
      便利ツールランキング
      アフィリエイトの実践を補助する役立つ便利ツールをランキング形式でご紹介します。

      ◆Facebook始めました◆

      最新記事もチェック

      ◆SAKUの無料メルマガ購読のご案内◆

      mail-magazine

      コメントを残す

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