無料会員制サイト

WordPressライトボックスは「Easy FancyBox」で決定

Easy FancyBox

Lightbox(以降ライトボックス)って何?

ライトボックスとは画像を拡大表示させるために「JavaScript」や「jQuery」のライブラリーを使用したアプリケーションの総称です。

あ~、もう読む気がしない。
いきなり「JavaScript」や「jQuery」とか、聞き慣れない言葉が出てきただけでうんざり。

とろころが、このライトボックス。
Wordpressでは簡単に導入することができるんです。

既に知っている方も多いと思いますが、今回のテーマはライトボックスの便利な使用方法と注意点について紹介していきます。

導入前の注意点

あなたのブログにライトボックスの機能が必要なのか?

かっこいいからとか、何となく便利そう。
そんな理由でライトボックスを導入するのはやめましょう。

実はライトボックスを導入することで、他のブラグインに悪影響を与える恐れもあるからです。

例えば「あなた」のブログがタイトルの下にそれぞれ画像は一枚、そして文章がメインならライトボックスを導入する必要はありません。

ライトボックスが必要なブログとは?
  1. 画像を多く使用するギャラリー風のブログ
  2. WEBサービスの紹介などで画像を多く使用するブログ
  3. 図解入りでソフトの使用方法などを紹介するブログ

以上のように大きな画像を見せる必要があるブログであれば、ライトボックスを導入することで読者の利便性(ユーザービリティ)が向上します。

そんな場合はライトボックスを積極的に導入することをオススメします。

ライトボックスを導入するならレスポンシブ対応が必須条件

レスポンシブ対応ライトボックス

アクセス解析を見ると、侍仕事塾の場合はデスクトップでの閲覧が約7割になります。

これはブログを作成する前から予想はしていたので驚く数字ではありません。

それでもブログ事態はレスポンシブに対応させています。

あなたもお分かりのようにレスポンシブに対応していないブログやサイトは、これから先は生き残るのが難しいでしょう。

ライトボックスも同様です。
レスポンシブに対応していないライトボックスを導入しようと考える人はいないですよね。

つまりレスポンシブ対応は必須条件。
これから紹介するライトボックスも、全てレスポンシブに対応しています。

レスポンシブに対応している多くのライトボックスの中から、私が選んだのは「Easy FancyBox」です。

私が「Easy FancyBox」をなぜ選んだのか?
理由は5つあります。

「Easy FancyBox」を選んだ5つの理由
  1. 最新のWordpressと互換性がある
  2. 更新頻度が早く常に最新の状態
  3. 多くのユーザーが使用している
  4. ユーザーの評価が非常に高い
  5. レスポンシブに完全対応している

以上が「Easy FancyBox」を選んだ理由です。
しかし、良い点だけではありません。

  1. ヘルプや設定画面は英語
  2. 簡単とは言え設定項目は多い
  3. 一部は手動でクラス指定する必要がある

3番目の手動でクラス指定が必要なのは、逆に言うとありがたいことでもあります。

次からは、インストールから設定方法まで画像と動画で解説していきましょう。

「Easy FancyBox」インストール

「Easy FancyBox」インストール

出典:WordPress.ORG 日本語

インストール方法
  1. 管理画面の左メニュー「プラグイン」をクリック
  2. プラグイン「新規追加」をクリック
  3. 検索窓に「Easy FancyBox」と入力してください。
  4. 検索結果から「Easy FancyBox」インストール⇒有効化

これでプラグインのインストールは終了です。
ここまでは問題なく進めると思いますが、ここからが少し大変かもしれません。

「Easy FancyBox」設定方法

最初に設定項目について説明していきます。

かなりのボリュームになります。
読むのが面倒なかたは動画で見る設定方法をご覧下さい。

Mediaの設定項目(画像クリックで拡大)

Mediaの設定項目

Images
初期設定ではチェックが入っています。
Inline content
HTMLで作成したコンテンツを表示できます。
PDF
PDFを拡大表示することができます。
SWF
いわゆる「Flashムービー」のファイル形式です。
YouTube
YouTube動画を拡大表示することができます。
Vimeo
Vimeoの動画を拡大表示することができます。
Dailymotion
Dailymotionの動画を拡大表示することができます。
iFrames
iFrames要素の拡大表示ができます。
Overlayの設定項目(画像クリックで拡大)

Overlayの設定項目

初期設定でチェックが入っている場所は、チェックしたままにして下さい。

Opacity
初期設定でチェックが入っているコンテンツの背景の透明度(0~1、デフォルト0.7)を調整できます。
Color
文字の色を変えることができます。デフォルトでは「#777」黒に近い文字色になっています。
Spotlight effect.
こちらは有料になりますので今回は無視しましょう。
Window設定項目(画像クリックで拡大)

Window設定項目

初期設定ではチェックが入っている場所はそのままにしてください

Show the (X) close button
閉じるボタンの表示、初期設定ではチェックが入っています。
Background color
こちらも有料になりますので今回は無視しましょう。
Text color
こちらも有料になりますので今回は無視しましょう。
Title color
タイトルの文字色を指定できます。デフォルトでは「#fff」白に設定されています。
Border radius
こちらも有料になりますので今回は無視しましょう。
Dimensions
拡大画像のサイズを指定できます。デフォルトでは560 x 340 px に設定されています。
枠線
画像周辺の枠線の太さを指定できます。デフォルトでは10px に設定されています。
Margin
デフォルトでは40ですが表示位置を変更したいときは数値を入力してください。
Behavior
画像を拡大するスピードや閉じた時の動作が調整できます。
Miscellaneous(画像クリックで拡大)

Miscellaneous

ここでは他の色々な設定ができます。

Auto popup
画像のポップアップの読み込み設定です。設定を変更したい場合は有料となります。
Delay in milliseconds
画像をポップアップする時の時間調整ができます。
Browser & device compatibility
最小画面サイズの設定と、IE8に対応させるかどうかを選択できます。
Advanced
こちらは有料版のみ設定が可能な項目なので今回は無視です。
Images(画像クリックで拡大)

Images

ここでは全ての画像を拡大表示(オーバーレイ)で開くために自動検出の設定ができるようになっています。

ただし、Wordpressのメディアファイルにリンクされていない画像は拡大表示されません。

Autodetect
自動検出する画像の種類を追加・削除できます。
Apply to・・・
ここは有料版以外は設定を変えることはできません。
Force FancyBox to・・・
ここではクラス指定「class=”fancybox”」の画像を全て拡大表示するか設定できます。
Behavior
ここも有料版以外は設定が変えられませんので無視です。
Appearance
画像のタイトルを表示するか?または場所を設定できます。
Allow title from thumbnail alt attribute.
画像の「alt」属性をタイトルにするか選択できます。
Gallery
ここも有料版でしか設定変更は出来ないので無視です。
Show the gallery navigation arrows
ギャラリーでのナビゲーションを表示するか?
Arrow key strokes browse the gallery
矢印キーをクリックした時の動作
Include the Mousewheel・・・
jQuery拡張スクリプトを組み込んで、マウスホイール操作を許可するかを選択
Make galleries cyclic・・・
矢印キーを何度かクリックして好きな画像に移動できるようにします。
Advanced
有料版のみ設定変更可能なので無視しましょう。
Inline content(画像クリックで拡大)

Inline content

ここではインラインコンテンツ「div」要素を表示する時の設定ができます。

IDやクラス指定に関しては次のサンプルの章で紹介します。

Try to adjust size to inline・・・
インライン要素のサイズを指定できます。指定のない場合はデフォルトサイズで表示されます。
Scrolling
スクロールバーの表示方法を設定できます。「Auto」がベストだと思います。
Transition In
拡大表示する時のエフェクトが選択できます。
Easing In
拡大表示する時の挙動を選択できます。
Transition Out
閉じる時のエフェクトを設定できます。
Easing Out
閉じる時の挙動を設定できます
Transparency fade・・・
トランジションが「Elastic」の設定の場合のみ断続的に透明度が変化していきます。
Close FancyBox when content is clicked
コンテンツをクリックすると拡大要素を閉じることができます。
PDF(画像クリックで拡大)

PDF

PDFドキュメントファイルをオーバーレイで開くには、自動検出を有効にするかクラス指定「”fancybox-pdf”」する必要があります。

Autodetect
自動検出を有効にする場合はチェックをいれてください。
Embed with
拡大表示された時の横幅の設定が選べます。
幅、高さ、枠線
ここでサイズを自由に変えることができます。
Show title・・・
チェックをいれるとリンクまたはサムネイルのタイトル属性からタイトルを取得します。
Title Position
タイトルの表示位置を選択できます。
Allow title from thumbnail alt attribute.
サムネイルのalt属性からタイトルを許可する。
YouTube(画像クリックで拡大)

YouTube

オーバーレイでYouTubeムービーを開くには、自動検出をオンにするかリンクに「fancybox-youtube」クラスを使用します。

Autodetect
チェックをいれるとYoutubeリンクを自動検出します。
幅、高さ、枠線
ここで拡大表示した場合のサイズを調整することができます。
Show title・・・
チェックを入れるとリンクまたは画像のタイトル属性からタイトルを取得します。
Title Position
タイトルの表示位置を選択できます。
Allow title from thumbnail alt attribute.
チェックを入れるとサムネイルの「alt」属性からタイトルを取得します。

この他にも「Vimeo」や「Dailymotion」の動画、「iFrame」を拡大表示することもできます。

以上で「Easy Fancy Box」の設定は終了となります

「Easy FancyBox」動画で見る設定方法

それでは動画で設定方法を、じっくりとご覧ください。

その前に一言。
詳しく説明しようと思って動画が長くなってしまいました。

設定  から速度を変更できますので、時間のない方は倍速でお願いします。

Easy FancyBox

いかがだったでしょうか?
多分「こんなに設定する項目があるなら他のライトボックスにするよ」

ごもっともな意見ではありますが「Easy FancyBox」は、他のライトボックスに比べると設定項目は少ない方です。

ちょっとだけ頑張ってください!
あ~肝心なことを忘れていました、クラス指定の方法を。

メディア形式のクラス指定

HTML

<!--画像を単独で拡大表示 -->
<a href="image01.jpg"><img src="image01.jpg" alt="ここに画像タイトル" /></a>
<a href="image01.jpg"><img src="image01.jpg" alt="ここに画像タイトル" /></a>
<a href="image01.jpg"><img src="image01.jpg" alt="ここに画像タイトル" /></a>
<a href="image01.jpg"><img src="image01.jpg" alt="ここに画像タイトル" /></a>

<!-- ギャラリー画像を拡大表示 -->


<!-- Youtube動画を拡大表示 -->
<a class="fancybox-youtube" href="<!-- Youtube-URL -->"><!-- ここにテキスト、または画像 --></a>

<!-- Vimeo動画を拡大表示 -->
<a class="fancybox-vimeo" href="<!-- Vimeo-URL -->"><!-- ここにテキスト、または画像 --></a>

<!-- Dailymotionを拡大表示 -->
<a class="fancybox-dailymotion" href="<!-- Dailymotion-URL -->"><!-- ここにテキスト、または画像 --></a>

<!-- PDFを拡大表示 -->
<a class="fancybox-pdf" href="<!-- PDFファイルURL -->"><!-- ここにテキスト、または画像 --></a>

<!-- インライン要素を拡大表示 IDは自由に書き換えてください -->
<a id="inline-box" class="fancybox-inline"><!-- ここにテキスト、または画像 --></a>
<div class="fancybox-hidden">
<div id="inline-box">
<!-- ここに拡大表示させたい要素 -->
</div>
</div>

これだけではイメージがわかないと思いますのでサンプルをご覧ください。

こんなことが出来る「Easy FancyBox」サンプル集

開発者のページ

開発者のサンプルページはコチラになります。

使い方は殆ど一緒なのですが、Wordpressのプラグイン用サンプルではありませんのでご注意を。

それではサンプルをご覧ください。

画像を一枚一枚拡大するサンプル
カナダの大自然
砂嵐の前兆
広大な草原と青い空;
アリゾナの赤い大地
WordPress「ギャラリーを作成」を使用したサンプル
Youtube動画を表示するサンプル

 YouTube動画

Vimeo動画を表示するサンプル

 Vimeo動画

PDFを表示するサンプル

 PDF表示サンプル

inline要素を表示するサンプル

 HTML表示サンプル

こんな感じでHTMLも拡大表示可能

横幅と縦幅のサイズを指定した「div」要素も表示できます。

縦幅の指定をしておけばスクロールするこのも可能。

どんな使い方があるのか?
正直言って、あまり使用する機会はないですかね。

まっ、いつか有効な使用手段が見つかるかもしれないので、とりあえず有って損はないでしょう。

テーブルを拡大表示させる?
う~ん、迷うばかりです。

今回はサンプルですので全て紹介しましたが、私の場合でしたらYoutubeと画像くらいしか使わないと思います。

まとめ「ライトボックス」は本当に必要なの?

最後のまとめ

ここまで読ませておいて、このタイトルはないでしょう。

お怒りはごもっともです。
ただライトボックスは絶対に必要なプラグインではありません。

WordPressには非常に便利なプラグインがそろっていますので、気をつけないと多くのブラグインをインストールしてしまいます。

表示速度やセキュリティーの面から考えても、プラグインは少なければ少ないほど良いと言われていますし私も同意見です。

特に注意したいのはWordPressで作成した1つのブログにライトボックスは1つだけ。

そんな大事なことなら「最初に書いとけよ」
決してライトボックスを否定している訳ではありませんのでご安心を。

注意点さへ守れば「Easy FancyBox」のようなライトボックスは、ブログ運営者にとっても読者にとっても有益なものであることは間違いありません。

ライトボックスが必要な方は積極的に導入してみてはどうでしょうか?

今回はWordpressプラグイン「Easy FancyBox」の紹介でした。

それでは次回お会いするまで、さようなら~。

あぁ~、また忘れちゃいました。
プラグインをインストールするときはローカル環境でのテストはお忘れなく!

参考記事
初心者でも簡単bitnamiでWordPressローカル環境構築

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください