Lightbox系プラグイン『ARI Fancy Lightbox』の使い方

Lightbox系プラグイン『ARI Fancy Lightbox』の使い方
スポンサーリンク

一番良さそうなLightbox。

画像を拡大表示できるLightbox系WordPressプラグイン『ARI Fancy Lightbox』の使い方を紹介します。

本記事の趣旨と目的

本記事の趣旨と目的
  • 『ARI Fancy Lightbox』を導入する。
  • どういう機能があるかを知る。

簡単に『ARI Fancy Lightbox』について説明し、導入後の設定について解説していきます。また、どうして数あるLightbox系WordPressプラグインの中で、『ARI Fancy Lightbox』を使うのかも、少しだけ話しておきます。

『ARI Fancy Lightbox』って?

Lightbox系WordPressプラグイン『ARI Fancy Lightbox』。

Lightbox系WordPressプラグイン『ARI Fancy Lightbox』。

この『ARI Fancy Lightbox』は、Lightbox系WordPressプラグインです。

Lightboxとは、画像を拡大表示できる機能のことです。必須なプラグインではありませんが、ある便利なプラグインのひとつです。

利用イメージ

デフォルトだと、このような表示になります。

ARI Fancy Lightboxを導入する方法

ARI Fancy Lightboxは、

  • WordPress内のプラグイン項目からインストール。
  • WordPress公式サイトから入手・インストール。

の2つの方法があります。

この『ARI Fancy Lightbox』は、WordPressプラグインですので、導入方法はほかのWordPressプラグインのインストール方法と同じです。なので、ここでの詳しい導入方法は割愛します。

WordPressのプラグインをダウンロード&インストールする方法

2019.02.27

各種設定

それでは、ARI Fancy Lightboxの各種設定について、詳しく見ていきます。

ちなみに、設定画面には、WordPressの左側のメニュータブにARI Fancy Lightboxと表示されるので、そちらを選択して入ることができます。

Integration

赤枠で囲った部分にチェックを入れれば、とりあえずは使える。

赤枠で囲った部分にチェックを入れれば、とりあえずは使える。

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自体の細かい設定が可能。

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

Lightboxのデザインを変更可能。

Lightboxのデザインを変更可能。

この『Style』では、Lightboxのデザイン(色・透明度など)を変更ことができます。また、カスタムCSSを記述したり、z-indexが競合する場合の優先度も設定できます。ちなみに、上画像はデフォルト値です。

Advanced

ここでは拡張設定が可能。

ここでは拡張設定が可能。

この『Advanced』では、アンインストール時の挙動やカスタムJavaScriptを記述できます。ちなみに、上画像はデフォルト値です。

Upgrade

Pro版へのアップグレードが可能。

Pro版へのアップグレードが可能。

この『Upgrade』では、Pro版へのアップグレードが可能です。

Pro版にすると、Lightboxに固有のリンクが生成できたり、ディープリンクで開くことができるようです。おそらく、通常利用の用途範囲内だと、Pro版にする必要は少ないかも知れません。

注意点

ARI Fancy Lightboxの注意点
  • リンク先をメディアファイルにする。
リンク先の設定を間違うと、Lightboxが使えない。

リンク先の設定を間違うと、Lightboxが使えない。

おそらく、これは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を使っていく予定です。

四条せつな
あ、切り替えるの面倒だ…。
スポンサーリンク

コメントを残す