写真をクリックした時に拡大表示させるプラグイン

Wordpress LightBox Plugin
  • このエントリーをはてなブックマークに追加
  • Pocket
写真をクリックした時に拡大表示させるプラグイン

ブログに掲載した写真をクリックした時に、ブラウザのウィンドウいっぱいに写真を表示させられるオススメのプラグインをご紹介いたします。

ブログの使い勝手の良し悪し

まずはプラグインを導入する前の状態です。

プラグイン導入前

プラグイン無しの状態

写真をクリックした時の挙動

写真をクリックすると別のページにジャンプしてしまいます。写真を大きく表示することはできますが前のページに戻るときには「戻るボタン」をクリックしなければなりません。

さらに前のページが最初から読み込まれるためページのロードに時間がかります。使い勝手が非常に悪いブログになってしまいます。

別ページにジャンプ

WP Lightbox 2

別のページにジャンプすることなく、現在のページでブラウザの横幅いっぱいに写真を表示できるプラグインです。

プラグインダウンロードリンク

オススメのLightBoxプラグイン

WP Lightbox 2をインスタントし有効化させるとWP Lightbox 2の設定画面が追加されます。設定画面は【設定】→【WP Lightbox 2】の中にあります。

それぞれの設定項目の説明です。

WP Lightbox 2の設定

  • Auto-lightbox Image links  →  写真をクリックした時にLightBox表示になります。
  • Enable lightbox in comments →  コメント内の写真をクリックした時にもLightBoxが有効化されます。
  • Show download link →  「ダウンロード」のリンクをLightBox内に表示。
  • Target for download link: →  「ダウンロード」のリンクをクリックした時、【_blank】に設定すると別タブ(別ウィンドウ)にジャンプします。
  • Show image info on top →  チェックを入れると画像情報が写真の上に表示されます。(チェックを外すと写真の下に。)
  • Shrink large images to fit smaller screens →  ブラウザの横幅に写真をフィットさせて表示させます。(チェックを外すと画像サイズが大きい場合、ウィンドウから写真がはみ出ます。)
  • Animation duration →  LightBoxに変化する際のアニメーションの継続時間。100〜300くらいが調度良いと思います。
  • Help text →  注意事項や備考などを表示させたいときに。(Photo by dafuku など。)
WP Lightbox 2の設定方法

【Show image info on top】にチェックを入れ、【Help text】に文字を入力した状態です。

WP Lightbox 2の設定例

【Show image info on top】のチェックを外し、【Help text】を空にした状態です。

WP Lightbox 2の設定例

WP Lightbox 2のプラグイン導入後のサンプルです。

 WP Lightbox 2サンプル

この記事で使用/紹介された機材
コメント

関連記事

この記事の著者

栃木県日光市出身。O型の水瓶座。
プログラマーとして都内のWEBクローラー開発会社に勤務。
WEBの設計〜デザイン、WEBアプリ作成、コーディング、SEO、広告出稿関連業務、蛍光灯の交換、写真係を担当。
2012年から始めたブログ(ダーフク.com)にて記事掲載用の写真を撮影するために購入した単焦点コンパクトデジタルカメラRICOH GR Digital Ⅳにハマる。それ以来、ブログ上でカメラに関する記事を書き始め、現在に至る。

この著者の最新の記事

コメント

  1. コメントはコチラからどうぞ!

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

コメント

Heads up! You are attempting to upload an invalid image. If saved, this image will not display with your comment.

※コメントの投稿について
  • 画像がアップロードされるまで時間がかかる場合があります。
  • 返信される際は、「このコメントに返信する」ボタンを押して、コメントをご記入ください。
  • この記事の著者

    Google+CameraBlog

    メルマガ購読

    ブログ記事の更新情報を無料でメール配信しております。


     

    最近のコメント

    Twitter

    ページ上部へ戻る
    Top