Easy FancyBoxプラグイン ~WordPressでブログを始める~ | そう備忘録

Easy FancyBoxプラグイン ~WordPressでブログを始める~

前回の「Google XML Sitemapsプラグイン」の記事

Easy FancyBoxとは

Easy FancyBoxは記事中の画像をクリックした時の拡大表示をカスタマイズするプラグイン。

リンク先にメディアファイルを指定すると標準でも画像の拡大表示は行われるが表示のアニメーションが無いのと戻るボタンで戻る必要がある。

Easy FancyBoxを使えば拡大表示の時にアニメーションを付けたりタイトルを表示させることができる。

またポップアップ表示されるので右上のバツ印で閉じることができる。

他には複数の写真を次々に表示させるギャラリー機能などがある。

Easy FancyBoxのインストール

WordPressのメニューよりプラグインー>新規追加ー>検索フィールドで”Easy FancyBox”を検索する。

Easy FancyBoxが表示されたら「今すぐインストール」をクリックする。

Easy FancyBox 今すぐインストール

インストールされるので「有効化」をクリックする。

Easy FancyBox 有効化をクッリク

Easy FancyBoxの設定

WordPressのメニューよりプラグインー>インストール済みプラグインの後、Easy FancyBoxの「設定」ボタンで各種設定をする。

またはWordPressのメニューから設定ー>メディアからもいける。

Easy FancyBoxの設定

画像ファイルとファイルアップロード

この設定項目は元々の設定ー>メディアで設定可能な項目。

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は使わないことにした。

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設定

オーバレイ表示(表面を薄く覆う)についての設定をここで行う。

Easy FancyBox Overlay表示の設定

Show the overlay around content opened in FancyBox.

チェックした。

画像を拡大表示した時に周辺の画像をそのまま表示するかオーバレイ表示(透過表示にして画像を際立たせる)にするかどうか。

オーバレイ表示

Easy FancyBox 周辺をオーバレイ表示

非オーバレイ(チェックをしていない)

Easy FancyBox 周辺をオーバレイ表示していない

 

Close FancyBox when overlay is clicked.

チェックした。

オーバレイ部分(画像の外側)をクリックした時にウィンドウを閉じる。

Opacity

指定してしない。

透過度を0から1まで0.1単位で指定する。

デフォルトは0.7

Color

指定していない。

透過色を指定できる。

デフォルトは#777

下記はOpacity:0.9、Color:#000000(黒)を指定した場合の表示例

Easy FancyBox OpacityとColorの指定例

Window Appearance設定

画像の表示方法を指定する。

Easy FancyBox Appearanceの設定

Show the (X) close button

チェックした。

画像の右上に閉じるボタン(X)を表示する。

Title color

#fbfaf5(生成り色 きなりいろ)を指定した。

画像のタイトル(代替テキストが表示される)の文字色。

未指定の場合は#fff(白)なる

Border color

#fbfaf5(生成り色 きなりいろ)を指定した。

画像のタイトル(代替テキストが表示される)の枠の色。

未指定の場合は#fff(白)なる

Easy FancyBox タイトルと枠の色

Window Dimensions設定

寸法を指定する。

Easy FancyBox Dimensionの設定

幅、高さ

未設定

コンテンツサイズが未設定または自動的に決定できない場合のデフォルトサイズを指定する。

指定しないと560px x 340pxが適用される。

枠線

指定していない。

画像の外枠のサイズ。

未指定の場合は10pxが適用される。

Margin

指定していない。

画像とブラウザの枠とのマージン

未指定の場合は40pxが適用される。

Window Behavior設定

動作(ふるまい)を指定する。

Easy FancyBox 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設定

自動ポップアップの設定。

ここは何を設定しても動作は変わらなかった。恐らく有償版ではページを表示した時に自動的に画像をポップアップする設定ができるのだと思う。

無償版は画像をクリックしたタイミングでポップアップする。

Easy FancyBox 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設定

画像に関する設定を行う。

Easy FancyBox imageの設定

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設定

画像を表示する時の動作を指定する。

Easy FancyBox images Behavior設定

Transition In

Elasticを指定した。

画像を表示する時のアニメーション。

  • Elastic:伸び縮みしながら表示する
  • Fade:透過状態から段々と表示される
  • なし:アニメーションなしでパッと表示される

Transition Out

Elasticを指定した。

画像を閉じる時のアニメーション。

指定可能な項目はTransition Inと同様

Easing In

Linearを指定した。

Transition InにElasticを指定した時のみ有効な設定値。

画像を開く速度を指定する。

  • easeOutBack
  • easeInBack
  • Swing
  • Linear

下にいくほどゆっくりと表示される。

Easing Out

Linearを指定した。

画像を閉じる速度を指定する。

設定可能な値はEasing Inと同様。

Transparency fade during elastic transition.

チェックした。

Transition In、Out中に透過しながら画像を表示する。

TransitionにElasticが指定されている時のみ有効。

Close FancyBox when content is clicked

チェックしていない。

チェックをすると画像をクリックすると閉じる。

Images Appearance設定

画像の外観を設定する。

Easy FancyBox Images Appearance設定

Show title

チェックした。

画像のタイトルを表示する。

Easy FancyBox Show Titleの設定

Title Position

 Floatを指定した。

タイトルの表示位置を指定する。

以下の値を設定できる。

Outside

Easy FancyBox Title Position Outside

Inside

Easy FancyBox Title Position Inside

Overlay

Easy FancyBox Title Position Overlay

Float

Easy FancyBox Title Position Float

Allow title from thumbnail alt tag

チェックした。

「代替テキスト」欄に入力した文字列をタイトルとして表示させる。

Advanced

無償版では「Hide/show title on mouse hover action」しか指定できない

Images Gallery設定

ギャラリーに複数の写真を格納して次々と写真をスライド表示させることができる。

ギャラリーの例・・・左右の矢印キーで3枚の写真が入れ替わる

ギャラリーの作成方法

1.「メディアを追加」をクリックする メディアを追加

2.「ギャラリーを作成」をクリックする

ギャラリーを作成

3.メディアライブラリからギャラリーに追加したいファイルを複数選択して「ギャラリーを作成」をクリックする。

ギャラリーを作成

4.リンク先を「メディアファル」に変更して「ギャラリーを挿入」をクリックする事で記事中にギャラリーが挿入される。

ギャラリーを挿入

設定

Easy FancyBox 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

チェックした。

画像の左右に前後の写真に移動するための矢印を表示する。

マウスオンすると表示される。

Easy FancyBox ナビゲーションの矢印

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(前述)に関する設定を行う。

Easy FancyBox Inline content設定

Try to adjust size to inline/html content. If unchecked the default dimensions will be used.

チェックした。

コンテンツを拡大表示した時の表示サイズを文字数に合わせて調整する。

未チェックだとデフォルトのサイズで表示される。

Scrolling

Autoを指定した。

拡大表示した時にスクロールバーを表示するかどうか。

  • Auto :サイズに合わせて自動的に表示/非表示する
  • Always:常にスクロールバーを表示する
  • Never  :常にスクロールバーを表示しない

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プラグイン(前編)」の記事に続く

 

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。