Responsive Lightboxの使い方

背面をグレーアウトさせて画像を表示するLightbox系のプラグイン – Responsive Lightboxの使い方

Responsive Lightbox

Pocket

Lightboxとは

記事中のサムネイル画像をポップアップで拡大表示する方法です。サムネイル画像をクリックした際にモーダルウィンドウを開いて拡大画像を表示し、画面遷移せずになめらかに画像を閲覧できます。

Lightbox系のプラグイン

「Responsive Lightbox」は背面をグレーアウトさせて画像などを表示するLightbox系のプラグイン。デバイスによって画像の大きさが自動的に調整されるレスポンシブなデザインに対応しています。

Responsive Lightboxをインストールする

プラグインのインストール画面に移動

プラグインのインストール画面に移動

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から プラグイン > 新規追加 を選びプラグインのインストール画面に移動します。

Responsive Lightboxを検索する

Responsive Lightboxを検索する

プラグインのインストール画面に移動したら、検索窓に「Responsive Lightbox」と入力し プラグインの検索 をクリックします。WordPress プラグインディレクトリ からプラグイン「Responsive Lightbox」を自動的にインストールできます。

Responsive Lightboxのインストール

Responsive Lightboxのインストール

プラグインのインストール画面で検索結果が表示されます。検索結果の一覧の中から「Responsive Lightbox」を探し、 いますぐインストール をクリックします。現在の最新バージョンは Responsive Lightbox バージョン1.6.7 です。

プラグイン:Responsive Lightboxの有効化

Responsive Lightboxの有効化

プラグイン Responsive Lightbox のインストールが完了しました。インストール完了時に表示された画面の プラグインを有効化 をクリックし、プラグイン:Responsive Lightbox を有効にします。

プラグイン:レスポンシブLightbox が有効化されました

プラグイン:レスポンシブLightbox が有効化されました。有効化をクリックするとプラグイン:レスポンシブLightbox が有効化され、「インストール済みプラグイン」の画面が表示されます。プラグイン:レスポンシブLightbox が有効化された状態で表示されています。

Responsive Lightboxの使い方

レスポンシブLightbox の設定

レスポンシブLightbox の設定

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 設定 > レスポンシブLightbox を選びレスポンシブLightboxの設定画面に移動します。

レスポンシブLightbox の初期設定値(Default)

レスポンシブLightbox の初期設定値

ほとんどの設定は初期値のままで構わないでしょう。まず、サムネイル画像をクリックした際にモーダルウィンドウを開いて拡大画像を表示する際の効果(エフェクト)を選択します。初期設定は SwipeBox になっています。

設定画面で選択可能なエフェクトは下記の4つになります。

  • prettyPhoto
  • SwipeBox
  • FancyBox
  • Nivo Lightbox

prettyPhoto の表示例

prettyPhoto のタブレット端末での表示例

iPad横置きでprettyPhotoを表示

iPad横置きでprettyPhotoを表示しました。

prettyPhoto のスマートフォンでの表示例

iPhone横置きでprettyPhotoを表示

iPhone横置きでprettyPhotoを表示しました。

Swipebox の表示例

Swipebox のタブレット端末での表示例

iPad横置きでSwipeboxを表示

iPad横置きでSwipeboxを表示しました。

Swipebox のスマートフォンでの表示例

iPhone横置きでSwipeboxを表示

iPhone横置きでSwipeboxを表示しました。

FancyBox の表示例

FancyBox のタブレット端末での表示例

iPad横置きでFancyBoxを表示

iPad横置きでFancyBoxを表示しました。

FancyBox のスマートフォンでの表示例

iPhone横置きでFancyBoxを表示

iPhone横置きでFancyBoxを表示しました。

Nivo Lightbox の表示例

Nivo Lightbox のタブレット端末での表示例

iPad横置きでNivo Lightboxを表示

iPad横置きでNivo Lightboxを表示しました。

Nivo Lightbox のスマートフォンでの表示例

iPhone横置きでNivo Lightboxを表示

iPhone横置きでNivo Lightboxを表示しました。