WordPress のライトボックスにおすすめのプラグイン

ウェブサイトに写真などの画像を掲載すると注目度がアップするといわれています。具体的には、写真アルバムのような見やすさを実装すると効果が高いでしょう。方法はいくつかありますが、動的な効果を与えたり、表示スタイルをコントロールできる「ライトボックス機能」が便利です。ライトボックスに関しては、WordPressで使えるさまざまなプラグインが提供されています。この記事では、WordPressで作成されたページにライトボックスを実装できるおすすめのプラグインを紹介していきます。

ライトボックスとはどんな機能？

WordPressの投稿ページなどに画像を取り込む標準的な方法では、メディアライブラリを使います。ここにPCなどに保存された画像をアップロードすれば、簡単に画像をページに取り込むことができるのです。このとき問題になるのは、掲載したい画像が多い場合。単にページ上に画像を並べるだけでは、ユーザーにとって単調に感じられることもあるため、見る人の立場からの工夫が必要になります。とくに、メインとなるコンテンツが写真ギャラリーであるサイトや、図解を多く用いたスライド形式で情報を提供するサイトなどでは、画像データが多用されます。画像が多くなればなるほど、整理された形で提示する必要があるのです。そのような需要に応えて生まれたのがライトボックス機能といえます。

ライトボックスの基本機能は、ページレイアウト的にはサムネイル画像を表示しておき、クリック操作でポップアップする別ウィンドウを開いて拡大表示するというものです。この別ウィンドウをライトボックスと呼んでいます。画面上に、表示しているページから独立した小さな窓が開くイメージです。画像を見終わったら、このポップアップを消せばもとのページに戻れるため、ユーザーの離脱を防ぐ効果もあります。この動作を実現するためには、サイトを「動的な」ページにする必要があります。動的なページとは、ユーザーの動作に反応して表示が変わるページのことで、JavaScriptを導入する必要があるのです。jQueryライブラリを使えば、最初からコーディングすることなくプラグイン感覚でJavaScriptが導入できます。また、ページのレイアウトにはCSSによる表示コントロールも必須です。

ある程度のコーディングスキルのあるサイト管理者であれば、WordPressのテンプレートを編集することでライトボックスを実装できます。もちろん、豊富に選べるライトボックス用のプラグインを導入すれば、コーディングは不要です。ダイナミックで魅力的な画像を駆使したページを手軽に作ることができるのです。以下で、おすすめのプラグインを紹介していきます。

おすすめ1「Easy FancyBox」

WordPressのサイトにライトボックスを実装できる「Easy FancyBox」は、利用者数も多く、高い評価を得ているプラグインです。更新頻度も高く、新しいバージョンのWordPressへの対応も迅速に行われるため、動作の不具合の可能性も最小限に抑えられています。基本的な機能としては、画像を1枚ずつ、ライトボックスで拡大表示できたり、ギャラリー機能が使えたりします。ライトボックスでの「ギャラリー機能」とは、ライトボックスで画像を表示する際に、複数の画像を順番に表示する機能のことです。ナビゲーションが表示されるため、次の画像に移ったり前の画像に戻ったりする際に、元のページに戻ることなくライトボックス上で操作が完結できます。

また、設定によっては自動で次の画像を表示する「スライドショー」なども可能です。Easy FancyBoxは、設定で変更できる項目が多いため、サイトの雰囲気や目的に合わせた細かな設定が可能になっています。たとえば、ギャラリー機能であれば、マウスホイールの動きでスライドショーをコントロールしたり、最後と最初の画像をつなげてエンドレスなスライドにしたりもできます。設定できる項目が多い反面、英語表記なので初心者には難しく感じられるかもしれません。ただし、ネット上にあるさまざまな解説情報を利用したり、設定について自分で試したりしてみれば、十分にカバーできるでしょう。

おすすめ2「WP jQuery Lightbox」

ライトボックスプラグイン「WP jQuery Lightbox」は、使いやすさで人気があります。インストールして有効化すれば、既存の設定のままでもライトボックス機能が使えてしまうのです。また、ライトボックス系のプラグインには英語表記のものが多いのですが、主要な設定項目が日本語化されている点は、初心者にはわかりやすいといえます。では、具体的な操作手順を見てみましょう。まず、インストールして有効化します。プラグインの設定画面は、管理画面の左コラムにある「設定」項目にマウスオーバーしましょう。そこで表示される「jQuery Lightbox」をクリックすると設定画面が表示されます。

次に、画像側の設定をします。すでに画像が含まれているページがあれば、ビジュアルエディターで編集画面を開き、その画像をクリックしましょう。表示された鉛筆アイコンがついた「編集」ボタンをクリックして「画像詳細」ページを開きます。画像の「リンク先」のプルダウンメニューから「メディアファイル」になっていることを確認します。WP jQuery Lightboxでは、プラグイン側では初期設定のままでもよいのですが、画像側ではリンク先をメディアファイルにしておかないと、ライトボックス効果が得られません。インストールと有効化がうまくいっても、ライトボックス化できないときには、まずこの点をチェックしましょう。

おすすめ3「FancyBox for WordPress」

使いやすいライトボックスプラグインの1つが「FancyBox for WordPress」です。クリックするだけで画像が浮いた感じで拡大表示されます。また、ギャラリー機能もついており、アニメーションなどの設定も可能です。ライトボックス系プラグインの管理画面は英語版が多数派なのですが、FancyBox for WordPressの場合は部分的に日本語になっているので英語が苦手なユーザーも安心です。操作は次のような手順で行います。まず、インストールして有効化しましょう。プラグインの設定画面は管理画面の左コラムにあります。「設定」項目にマウスオーバーすると表示される「FancyBox for WP」をクリックすると設定画面が表示されます。

設定項目はAppearace、Animations、Behaviour、Galleries、Misc、Supportの6つのタブにわかれています。基本的な項目は、最初の2つであるAppearace（外観設定）、Animations（アニメーション設定）のタブを使いましょう。外観設定では、ライトボックスに境界線（border）を付ける際の色が指定できたり、境界線と画像の間の余白（パディング、padding）の色と幅の設定などが可能です。アニメーション設定では、ライトボックスを開くときのfade、zoom、zoom-in-outのアニメーション、次の画像に移動するときのfalse、 fade、slide、circular、tube、zoom-in-out、rotateの7つのアニメーションが選べます。なお、画像側の設定ではリンク先がメディアファイルになっているかどうか確認するようにしましょう。

おすすめ4「Simple light Box」

設定手順が少なく、手軽で使いやすいライトボックスプラグインが「Simple light Box」です。ページごとの無効化や有効化、スライドショー再生など、ライトボックスとしての基本的な機能は実装されています。具体的な操作は次の手順で行います。まず、インストールして有効化しましょう。プラグインの設定画面は管理画面の左コラムにあるブラシアイコンの「外観」項目に含まれています。マウスオーバーすると「Lightbox」が表示されるので、クリックしましょう。

開いたSimple light Boxの設定画面は、有効化、グループ化、UI、ラベルの4つの設定項目グループに分かれています。「有効化」では、投稿ページや固定ページごとにライトボックスの有効・無効などを設定できます。「グループ化」では、スライドショーのためのグループ項目の有効・無効などを設定可能です。「UI」では、ライトボックスのテーマを選べたり、ライトボックスをウィンドウサイズに合わせたり、画像のループ再生の有効・無効が設定できます。

なお、ライトボックスのテーマは、パディングの色のことで、白と黒から選べます。「ラベル」では、ナビゲーションのボタンに付けられたラベルの変更が可能です。なお、ダウンロード・有効化して設定画面を開いた時に日本語になっていない場合は対策が必要です。日本語化用の言語パックをtranslate.wordpress.orgから入手して適用するという方法です。すべてのプラグインの日本語言語パックが準備されているわけではないのですが、英語版に抵抗がある場合は試してみるとよいでしょう。

おすすめ5「jQuery Colorbox」

ライトボックスのテンプレートデザインが豊富なのが「jQuery Colorbox」の特徴です。ライトボックス自体の枠の色やキャプションの表示方法、また背景のオーバーレイの色によって11種類のテーマが用意されています。ページの目的や雰囲気に合わせて、すぐに使えるテンプレートが揃っている点は、とくに初心者や時間のないユーザーには便利でしょう。対応する画像の種類についても、GIF、JPG、PNG、FLASHなどでライトボックス化が可能です。具体的な操作手順は、まず、インストールして有効化します。プラグインの設定画面は、管理画面の左コラムにある「設定」項目にマウスオーバーしましょう。

そこで表示される「jQuery Colorbox」をクリックすると設定画面になります。多くのライトボックスプラグインでは、デフォルト設定のままでも動作するものが多いのですが、jQuery Colorboxは「Plugin settings」の項目にチェックを入れないと機能しない点に注意が必要です。チェックが入っていないと設定画面の上の方に赤色のバックグラウンドカラーで「jQuery Colorbox needs attention: the plugin is not activated to work for all images.」などのアラート表示が出ます。英語が苦手な場合は、上から順番に1つづつチェックを入れてみて、アラート表示が消えたら、画像を含むページでプレビューして動作を確認するとよいでしょう。なお、画像のリンク先をメディアファイルすることも忘れないようにしてください。

おすすめ6「WP-Slimbox2 Plugin」

ライトボックスのアニメーションや背景の色を自由に設定できる「WP-Slimbox2 Plugin」は、多くのユーザーに使われているWordPressのプラグインです。GIF、JPG、PNG、BMPなどのさまざまな画像形式に対応しています。ライトボックス系プラグインでは管理画面が英語表記のものが多く、設定に手間取ることがあります。その点、このプラグインは日本語化されているので、初心者にもやさしい設定になっているのです。操作は次のような手順で行いましょう。まず、インストールして有効化します。

プラグインの設定画面は、管理画面の左コラムにある「設定」項目にマウスオーバーすると表示される「WP-Slimbox2」をクリックします。設定画面は「項目」と「内容」から構成され、各設定項目ごとに詳しい内容が日本語で解説されるのです。デフォルトの設定のままでライトボックス機能が利用できますが、詳細な設定も可能になっています。たとえば、ライトボックスの周囲のオーバーレイの色をカラーサークルから選べたり、FlickerのURLリンクにライトボックス効果を与えることができたりします。

おすすめ7「Responsive Lightbox & Gallery」

ライトボックスで画像を拡大するときのスタイルを7種類から選んで設定できるプラグインが「Responsive Lightbox & Gallery」です。「Responsive Lightbox」の改良版で、ギャラリー機能が強化されています。テンプレートを使って、初心者でも手軽にサイトのイメージに合わせたライトボックスが設定できる点は変わりません。管理画面が一部日本語表示で、設定項目が整理されており、少ない手順でライトボックスが実装できる点もユーザーフレンドリーなプラグインといえるでしょう。

プラグイン名にもあるようにレスポンシブデザインに対応しているので、スマートフォンやタブレットによる表示でもレイアウトが崩れることがありません。具体的な操作の手順を確認しましょう。まず、インストールして有効化します。管理画面の左コラムに「Lightbox」と表示されるので、クリックしてライトボックスの設定画面に移行します。デフォルト設定では、ライトボックス周囲のオーバーレイが黒で、画面の中央に画像を拡大表示する設定です。

スライドショーのように見せるギャラリー機能は管理画面の左コラムにある「Gallery」から設定する仕様になりました。画像を選択して登録するとショートコードが発行されます。ショートコードとは、コーディングを簡略化するために短縮したコードで記述できる仕組みです。ギャラリーを設定したいページのコードに、テキストエディターを使ってショートコードを貼り付けることでギャラリー機能が実装できます。

まとめ

ライトボックスのプラグインには多くの種類があります。簡単設定ですぐに使えるものから、詳細な設定でサイトの雰囲気に合わせることができるものまで多種多様なプラグインが利用可能です。