一番良さそうなLightbox。
画像を拡大表示できるLightbox系WordPressプラグイン『ARI Fancy Lightbox』の使い方を紹介します。
目次
本記事の趣旨と目的
- 『ARI Fancy Lightbox』を導入する。
- どういう機能があるかを知る。
簡単に『ARI Fancy Lightbox』について説明し、導入後の設定について解説していきます。また、どうして数あるLightbox系WordPressプラグインの中で、『ARI Fancy Lightbox』を使うのかも、少しだけ話しておきます。
『ARI Fancy Lightbox』って?
この『ARI Fancy Lightbox』は、Lightbox系WordPressプラグインです。
Lightboxとは、画像を拡大表示できる機能のことです。必須なプラグインではありませんが、ある便利なプラグインのひとつです。
利用イメージ
- 画像をクリックすると…。
- このようなLightboxが表示される。
デフォルトだと、このような表示になります。
ARI Fancy Lightboxを導入する方法
ARI Fancy Lightboxは、
- WordPress内のプラグイン項目からインストール。
- WordPress公式サイトから入手・インストール。
の2つの方法があります。
この『ARI Fancy Lightbox』は、WordPressプラグインですので、導入方法はほかのWordPressプラグインのインストール方法と同じです。なので、ここでの詳しい導入方法は割愛します。
各種設定
それでは、ARI Fancy Lightboxの各種設定について、詳しく見ていきます。
ちなみに、設定画面には、WordPressの左側のメニュータブにARI Fancy Lightboxと表示されるので、そちらを選択して入ることができます。
Integration
- WordPress Galleries
- Convert WordPress galleries(ギャラリー画像のLightbox表示)
- Navigate between items(ギャラリー画像のスライドショー表示)
- Images
- Convert links to images(単一画像のLightbox表示)
- Navigate between attachments(ページ全体の画像をギャラリー風に表示)
- Custom grouping selectors(画像のグループ化設定)
- Get title from EXIF data(EXIFデータからタイトルを取得)
- Convert file name to title(ファイル名をタイトルを取得)
- Smart title(ファイル名の変換)
- YouTube videos
- Convert YouTube links(動画をLightbox表示)
- Vimeo videos
- Convert Vimeo links(動画をLightbox表示)
- Metacafe videos
- Convert Metacafe links(動画をLightbox表示)
- Dailymotion videos
- Convert Dailymotion links(動画をLightbox表示)
- Vine videos
- Convert Vine links(動画をLightbox表示)
- Instagram content
- Convert Instagram links(Instagram画像のLightbox表示)
- Google Maps links
- Convert Google Maps links(GoogleマップのLightbox表示)
- Show marker(場所のマーカー表示)
- PDF files
- Convert PDF links(PDFのLightbox表示)
- Open external links into lightbox
- Convert links(外部リンクのLightbox表示)
この『Integration』では、ARI Fancy Lightboxの一般的な設定が行えます。
かなり設定項目が多いのですが、上画像の赤枠で囲った部分にチェックが入っていれば、特に問題なくプラグインを使うことができるはずです。
Lightbox
- Lightbox
- Animation effect(アニメーション効果)
- Animation speed (ms)(アニメーション速度)
- Transition effect(トランジション時のアニメーション効果)
- Transition fx speed (ms)(トランジション継続時間)
- Idle time (sec)(待機時間)
- Slideshow pause (ms)(スライドショー待機時間)
- Slideshow auto start(スライドショーの自動開始)
- Loop navigation(ギャラリーのループ再生)
- Show navigation arrows(ナビゲーション用の矢印表示)
- Close on outside click(Lightboxを閉じる範囲)
- Keyboard navigation(キーボードショートカット有効化)
- Enable gestures(ジェスチャー有効化)
- Focus the first element(最初の要素にフォーカス設定)
- Show info bar(情報表示)
- Show buttons(メニューボタン表示)
- Buttons(表示するボタン)
この『Lightbox』では、Lightbox自体の設定を行います。
非常に細かく設定できるプラグインですが、基本的にはデフォルトのままで問題ないと思います。ちなみに、上画像はデフォルト値です。
Style
この『Style』では、Lightboxのデザイン(色・透明度など)を変更ことができます。また、カスタムCSSを記述したり、z-indexが競合する場合の優先度も設定できます。ちなみに、上画像はデフォルト値です。
Advanced
この『Advanced』では、アンインストール時の挙動やカスタムJavaScriptを記述できます。ちなみに、上画像はデフォルト値です。
Upgrade
この『Upgrade』では、Pro版へのアップグレードが可能です。
Pro版にすると、Lightboxに固有のリンクが生成できたり、ディープリンクで開くことができるようです。おそらく、通常利用の用途範囲内だと、Pro版にする必要は少ないかも知れません。
注意点
- リンク先をメディアファイルにする。
おそらく、これはLightbox系プラグイン全般に言えることなのですが、画像のリンク先はメディアファイルに設定しておきましょう。
でないと、プラグインで設定しているのに、実際はLightbox表示されないという現象が起きてしまいます。初歩的なミスですが、要注意。
補足
最後に、数あるLightbox系プラグインの中で、どうして『ARI Fancy Lightbox』を使うことにしたかを書いておきます。
このARI Fancy Lightboxの魅力として、機能の多さがあると思います。もちろん、それも魅力のひとつなのですが、個人的にはそれよりも“見やすさ”や“使いやすさ”が、このプラグインの最大の魅力な気がします。なので、このARI Fancy Lightboxを選びました。
矢印・閉じる・スライドショーなどの各ボタンの配置や大きさも、PCだけでなくスマートフォンにも最適化されており、モバイルフレンドリーなLightbox系プラグインだと思います。
まとめの一言「Lightbox系プラグインの決定版だ」
今回は、WordPressのLightbox系プラグインである『ARI Fancy Lightbox』の使い方や機能を解説していきました。

- Lightbox系プラグインの中で良さそう
- めっちゃ多機能なのに使いやすい
って、感じかなー?
ほかにも良さそうなLightbox系プラグインはありますが、当面はARI Fancy Lightboxを使っていく予定です。

コメントを残す
コメントを投稿するにはログインしてください。