Easy FancyBoxプラグイン ～WordPressでブログを始める～
前回の「Google XML Sitemapsプラグイン」の記事
Contents
Easy FancyBoxとは
Easy FancyBoxは記事中の画像をクリックした時の拡大表示をカスタマイズするプラグイン。
リンク先にメディアファイルを指定すると標準でも画像の拡大表示は行われるが表示のアニメーションが無いのと戻るボタンで戻る必要がある。
Easy FancyBoxを使えば拡大表示の時にアニメーションを付けたりタイトルを表示させることができる。
またポップアップ表示されるので右上のバツ印で閉じることができる。
他には複数の写真を次々に表示させるギャラリー機能などがある。
Easy FancyBoxのインストール
WordPressのメニューよりプラグインー＞新規追加ー＞検索フィールドで”Easy FancyBox”を検索する。
Easy FancyBoxが表示されたら「今すぐインストール」をクリックする。
インストールされるので「有効化」をクリックする。
Easy FancyBoxの設定
WordPressのメニューよりプラグインー＞インストール済みプラグインの後、Easy FancyBoxの「設定」ボタンで各種設定をする。
またはWordPressのメニューから設定ー＞メディアからもいける。
画像ファイルとファイルアップロード
この設定項目は元々の設定ー＞メディアで設定可能な項目。
Easy FancyBoxを有効にするとWordPressのメニューの下に追加でEasy FancyBoxで設定可能な項目が表示される様になる。
画像を追加する際の最大サイズの指定。初期設定から変更をしていない。
サムネイルのサイズ | 幅：150px 高さ：150px |
中サイズ | 幅の上限：300px 高さの上限：300px |
大サイズ | 幅の上限：1024px 高さの上限：1024px |
ファイルアップロード
ファイルアップロードは「アップロードしたファイルを年月ベースのフォルダに整理」のチェックを外した。
ここにチェックが入っているとアップロードした画像は下記のようなフォルダーに分割されて保存される。
https://www.souichi.club/wp-content/uploads/2018/03/xxx.jpg
チェックをしないと以下のようなフォルダー構成でアップされる。
https://www.souichi.club/wp-content/uploads/xxx.jpg
階層が深くなるのが嫌なのと画像のファイル名はユニークな名前を付けるので年月でのフォルダ整理はしないことにした。
Media設定
以下よりEasy FancyBoxの設定項目。対象とするメディアをチェックする。
ImagesとInline contentにチェックをした。
Imagesは画像、Inline contentは使うかどうか分からないけどテキストの拡大表示ができる。
youtubeは直接Youtubeのリンクを貼り付ければ再生されるのでEasy FancyBoxは使わないことにした。
Inline contentの使い方
テキストをFancyBoxでポップアップ表示する機能
使い方は以下の通り
<a href="#fancyboxID-1" class="fancybox-inline">ここをクリックすると文字が現れる</a>
<div style="display:none" class="fancybox-hidden">
<div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">
拡大すると現れる文字列
</div></div>製作者のサイトの「How can I display INLINE content in a FancyBox overlay ?」を参考にした。
Overlay設定
オーバレイ表示（表面を薄く覆う）についての設定をここで行う。
Show the overlay around content opened in FancyBox. | チェックした。 画像を拡大表示した時に周辺の画像をそのまま表示するかオーバレイ表示（透過表示にして画像を際立たせる）にするかどうか。 オーバレイ表示
非オーバレイ（チェックをしていない）
|
Close FancyBox when overlay is clicked. | チェックした。 オーバレイ部分（画像の外側）をクリックした時にウィンドウを閉じる。 |
Opacity | 指定してしない。 透過度を０から１まで0.1単位で指定する。 デフォルトは0.7 |
Color | 指定していない。 透過色を指定できる。 デフォルトは#777 下記はOpacity：0.9、Color：#000000（黒）を指定した場合の表示例
|
Window Appearance設定
画像の表示方法を指定する。
Show the (X) close button | チェックした。 画像の右上に閉じるボタン（X)を表示する。 |
Title color | #fbfaf5（生成り色 きなりいろ）を指定した。 画像のタイトル（代替テキストが表示される）の文字色。 未指定の場合は#fff（白）なる |
Border color | #fbfaf5（生成り色 きなりいろ）を指定した。 画像のタイトル（代替テキストが表示される）の枠の色。 未指定の場合は#fff（白）なる
|
Window Dimensions設定
寸法を指定する。
幅、高さ | 未設定 コンテンツサイズが未設定または自動的に決定できない場合のデフォルトサイズを指定する。 指定しないと560px x 340pxが適用される。 |
枠線 | 指定していない。 画像の外枠のサイズ。 未指定の場合は10pxが適用される。 |
Margin | 指定していない。 画像とブラウザの枠とのマージン 未指定の場合は40pxが適用される。 |
Window Behavior設定
動作（ふるまい）を指定する。
Center while scrolling | チェックした。 上下スクロールした時でも常に中心で表示される。 |
Esc key stroke closes FancyBox | チェックした。 Escキーで閉じる。 |
Scale large content down to fit in the browser viewport. | チェックした。 ブラウザのサイズに合わせて大きさを調整する。 ここをチェックしないとスマートフォンで表示した時に画像が大き過ぎて一部しか表示されない様な事がおきる。 |
Opening speed Closing speed | それぞれ600を指定した。 画像を表示する時と閉じる時の速度。 未入力だと300（0.3秒）が設定されている。多少、タメのアニメーションがあったほうがしっくり来たので600（0.6秒）を指定した。 |
Miscellaneous Auto popup設定
自動ポップアップの設定。
ここは何を設定しても動作は変わらなかった。恐らく有償版ではページを表示した時に自動的に画像をポップアップする設定ができるのだと思う。
無償版は画像をクリックしたタイミングでポップアップする。
Open on page load | デフォルトの「Link with ID “fancybox-auto”」を設定。 上記の他には「なし」が設定できる。ページの読み込み時に開く設定（だと思う）。 |
Delay in milliseconds | 遅延時間の設定 |
Hide popup after first visit? | 「いいえ」しか選択できない。 |
Include IE 8 compatibility style rules | チェックしていない。 IE8との互換性を維持するための設定。 |
Images設定
画像に関する設定を行う。
Autodetect | 初期設定（.jpg .jpeg .png .webp）のまま。 ポップアップ表示させたい画像の種類を指定する。 |
Apply to | All image linksしか指定できない |
Force FancyBox to treat all media linked with class=”fancybox” as images? | 「いいえ」を指定した。 画像のclassにfancyboxを指定した全てのメディアを強制的にFancyBoxの機能を有効するかどうか。 |
Images Behavior設定
画像を表示する時の動作を指定する。
Transition In | Elasticを指定した。 画像を表示する時のアニメーション。
|
Transition Out | Elasticを指定した。 画像を閉じる時のアニメーション。 指定可能な項目はTransition Inと同様 |
Easing In | Linearを指定した。 Transition InにElasticを指定した時のみ有効な設定値。 画像を開く速度を指定する。
下にいくほどゆっくりと表示される。 |
Easing Out | Linearを指定した。 画像を閉じる速度を指定する。 設定可能な値はEasing Inと同様。 |
Transparency fade during elastic transition. | チェックした。 Transition In、Out中に透過しながら画像を表示する。 TransitionにElasticが指定されている時のみ有効。 |
Close FancyBox when content is clicked | チェックしていない。 チェックをすると画像をクリックすると閉じる。 |
Images Appearance設定
画像の外観を設定する。
Show title | チェックした。 画像のタイトルを表示する。
|
Title Position | Floatを指定した。 タイトルの表示位置を指定する。 以下の値を設定できる。 Outside
Inside
Overlay
Float
|
Allow title from thumbnail alt tag | チェックした。 「代替テキスト」欄に入力した文字列をタイトルとして表示させる。 |
Advanced | 無償版では「Hide/show title on mouse hover action」しか指定できない |
Images Gallery設定
ギャラリーに複数の写真を格納して次々と写真をスライド表示させることができる。
ギャラリーの例・・・左右の矢印キーで３枚の写真が入れ替わる
ギャラリーの作成方法
１．「メディアを追加」をクリックする 
２．「ギャラリーを作成」をクリックする
３．メディアライブラリからギャラリーに追加したいファイルを複数選択して「ギャラリーを作成」をクリックする。
４．リンク先を「メディアファル」に変更して「ギャラリーを挿入」をクリックする事で記事中にギャラリーが挿入される。
設定
Autogallery | WordPress Galleries onlyを指定した。 他にはall in one galleries onlyとDisabledが指定出来る。 WordPress Galleries onlyとall in one galleries onlyの違いは正直よく分からなかったので初期値のままにしておいた。 Disabledを指定すると「rel属性で手動でグループ化できます」とヘルプにはあった。 |
Show the gallery navigation arrows | チェックした。 画像の左右に前後の写真に移動するための矢印を表示する。 マウスオンすると表示される。
|
Arrow key strokes browse the gallery | チェックした。 左右キーで写真を前後に移動する事ができる。 |
Include the Mousewheel jQuery extension script to allow gallery browsing by mousewheel action. | チェックした。 マウスホイールで写真を前後に移動する事ができる。 |
Make galleries cyclic, allowing you to keep pressing next/back. | チェックした。 一番最後の次が一番最初の写真になって一周する。 未チェックだと一番最後の写真の次ボタンが表示されない。 |
Change speed、Fade speed | 未指定。 画像切り替えとフェードの速度だと思うのだけれども自動で画像が切り替わらないので試せず。 Autogalleryをall in one galleries onlyに設定してみたりと試してみたけど分からなかったのでとりあえず放置。 |
Advanced | Slideshowから変更できず。 有償版だと他の設定が出来るのだと思われる。 |
Inline content設定
Inline content（前述）に関する設定を行う。
Try to adjust size to inline/html content. If unchecked the default dimensions will be used. | チェックした。 コンテンツを拡大表示した時の表示サイズを文字数に合わせて調整する。 未チェックだとデフォルトのサイズで表示される。 |
Scrolling | Autoを指定した。 拡大表示した時にスクロールバーを表示するかどうか。
|
Transition In | Elasticを指定した。 設定可能な値は前述の「Images Behavior設定」を参照 |
Transition Out | Elasticを指定した。 設定可能な値は前述の「Images Behavior設定」を参照 |
Easing In | Linearを指定した。 設定可能な値は前述の「Images Behavior設定」を参照 |
Easing Out | Linearを指定した。 設定可能な値は前述の「Images Behavior設定」を参照 |
| Transparency fade during elastic transition. | チェックした。 動作は前述の「Images Behavior設定」を参照。 |
| Close FancyBox when content is clicked | 未チェック 動作は前述の「Images Behavior設定」を参照。 |
次回の「Google Analytics Dashboard for WPプラグイン（前編）」の記事に続く
最近のコメント