ボヨヨヨ~~ン!と画像を拡大表示できるプラグイン『Easy FancyBox』を使ってみよう。

ボヨヨヨ~~ン!と画像を拡大表示できるプラグイン『Easy FancyBox』を使ってみよう。

記事の中で使う画像を挿入したときに、

「思ってたより画像が小さいなぁ・・・それに見にくい。もうちょっと細部まで見てもらいたいのになぁ・・・

なんてことを思ったことはありませんか?

 

そんなときに役立つのが、WordPressのプラグイン『Easy FancyBox』です。

 

画像をカチッとクリックするだけで、ボヨヨヨ~ン!と拡大表示されます。難しい設定もなく、インストールするだけなので、初心者でも簡単に使うことができます!

 

ボヨヨヨ~ン!っていったいどういうこと?? ですよね。

下の画像をクリックしてみてください

ボヨヨヨ~ンの例

画像が拡大表示されましたか?

このように、ボヨヨヨ~ン! と画像が拡大されるので、小さな画像を大きく見せたいときや、細かいところを見せたいときに使えるいい奴なんです。拡大画像を閉じるときのシューッって吸い込まれる感じも面白いですよね。

 

Easy FancyBox のおすすめポイント!

EasyFancyBoxのイメージ

 

インストールしてすぐに使える!

何も設定しなくてOK! インストールをして有効化するだけで、すぐに使うことができます。

 

インストール方法

プラグイン新規追加 をクリックします。

WordPressのプラグイン新規追加

「プラグインの検索. . . 」に『Easy FancyBox』と入力すると検索がスタートします。プラグインが出てきたら、「今すぐインストール」をクリックするとインストールが始まります。

EasyFancyBox

インストールが終わると、「今すぐインストール」の箇所が「有効化」に変わるので、そちらをクリックして有効化しましょう。

 

もうこれで使えるようになっています。簡単でしょ!

 

画像を挿入し、リンク先を設定するだけ!

いつも通りの操作方法だけで、拡大された画像を表示することができます。

 

画像の挿入方法(その1)

投稿の編集画面で「メディアを追加」をクリック。 

投稿 メディアを追加

 

挿入したい画像を選び、画面右下の「投稿に挿入」をクリック。

画像を投稿へ挿入

 

挿入された画像サイズは「フルサイズ」なのでサイズ変更を行います。

画像をクリックするとメニューが表示されます。「鉛筆(編集)」アイコンをクリックすると「画像詳細」ウィンドウが表示されるので、画像のサイズと、リンク先の設定をメディアファイルに変更します。最後に、右下の「更新」ボタンをクリックして終了です。

画像のサイズ変更、リンク先設定

画像の挿入方法(その2)

「メディアを追加」画面の右下に「添付ファイルの表示設定」があります。こちらからもサイズやリンク先の変更ができます。メディアを追加の設定

こちらで表示設定をして投稿に挿入した場合、次に挿入する画像にも同じ設定内容が引き継がれます

 

こはるは、次に引き継がれるのが嫌なので、

一度挿入してから変更するようにしています。

拡大するとき、閉じるときの動きが面白い!

拡大時のボヨヨヨ~ン!っていう感じと、閉じる時のシューッ!て吸い込まれる動きが、面白くて、気持ちいい。何度もカチカチやりたくなりませんか? こはるだけかなぁ・・・。

 

全てクリックで拡大できます

 

気球 1本の木

 

このボヨヨヨ~ン!っていう動きは「エフェクト」といいます。

「エフェクト」は設定で変更することが可能です。詳しくは、後ほど解説しますね。

 

拡大されて見える仕組み

クリックをして拡大表示された画像は、アップロードしたオリジナルサイズの画像です。

記事中で画像を使うときは、投稿ページの横幅に合わせたり記事に合うサイズに設定をして、小さく見せています。クリックすることで、アップロードした本来の画像サイズで表示されるという仕組みになっているのです。

[adcohrd]

ポップアップ機能で別ページへ移動しない!

ポップアップ機能でページ移動なし

この機能が一番のポイント!

記事中に挿入された画像が小さくて見にくいなぁ・・・って思うときは、その画像をクリックしますよね。

画像をクリックすると大きくなるかなぁ

 

そして、クリックしてみると「あれれ、ページが移動しちゃった! 元のページは・・・」

画像ページに飛んじゃった

 

たいていの場合、画像をクリックすると画像だけが表示されるページに移動してしまいますよね。拡大された画像が表示され、見やすくなるのはいいんですが、元のページへは「戻る」ボタンを押すというアクションが発生し、ちょっと面倒ですよね。

でも、『Easy FancyBox』を使えば、同じページ上にポップアップ表示され、別ページへ移動することがないので、閲覧者のストレスの軽減にも繋がります

 

ポップアップ

 

既存の記事画像にも適用されるので安心!

ボヨヨヨ~ン!と表示させるときに、リンク先を「メディアファイル」に設定しましたよね。

すでに投稿した記事内において、画像のリンク先をメディアファイルに指定しているものについては、インストールするだけで、ボヨヨヨ~ンと拡大表示されるようになります。

初心者には安心です。

 

他にもできることをピックアップしています。お時間がある方は続きをどうぞ。

エフェクトの設定

 

Images Behavior で、ボヨヨヨ~ン!以外の設定ができます。

Behaviorの設定

Transionの「In」が拡大時、「Out」が閉じる時の設定です。「Elastic」はボヨヨヨ~ン!です。「Elastic」以外に「Fade」の設定ができます。

Easingの「In」「Out」の設定は「Elastic」を選んでいる時のみ変更ができます。

 

画像以外のメディアもポップアップできる!

設定を変えるには、ダッシュボード > 設定 > メディア です。メディア設定の中に『Easy FancyBox』の設定機能が追加されています。

 

Media

ポップアップしたいメディアにチェックを入れて設定します。

メディア設定

ファイル 種類
Image 画像
Inline content 文章
PDF PDFファイル
SWF .swf形式のファイル
SVG .svg形式のファイル
Youtube Youtubeの動画
Vimeo Vimeoの動画
Dailymotion Dailymotionの動画
iFrames iframeを使用した文書

画像、動画、PDFについては、リンク先を「メディアファイル」にすることで拡大表示されます。

文章を拡大表示させるには、「Inline content」にチェックを入れ、次のコードをテキストに埋め込む必要があります。

<a href=”#ID-1” class=”fancybox-inline”>クリックする文字を入力</a>
<div class=”fancybox-hidden”><div id=”ID-1” > ここに表示させたい文章を入力 </div></div>

ID-1」の部分は、自由につけることができます(英数字)。

実際の表示はこちらです

【ここをクリックしてください】

初心者の方へ

ID-1」の部分を変更した場合は、<a href =”#○○“> <div id=”○○“> の ○○ は同じにしてくださいね。

<div id>で「表示する文章」にIDを付けます。<a href>はリンク先を指定するもので、ここで先ほど<div id>で付けたIDを指定すれば、「クリックしたらこのIDへリンクしてね」と設定することができます。

 

画像周りの表示方法を変更する

 

Overlay

Show the overlay around content opened in FancyBox.

Overlayの設定

ポップアップされた画像の周りを透明化するかどうかを設定します。デフォルトはチェックありです。

 

チェックありとなしのイメージ

チェックのありなしイメージ

チェックを入れた場合、以下の設定ができます。

Opacity

透明度の設定。設定できる値は「0」から「1」までの間で、小数点単位で入力します。初期設定は「0.7」です。

 

Color

色の設定。3ケタのコードで入力します。初期設定は「#777」です。

Advertisement

画像を閉じるときの設定

 

Overlay

Close FancyBox when overlay is clicked.

Overlayの設定

「Show the overlay around content opened in FancyBox.」にチェックを入れて設定しているときに、半透明部分をクリックして画像を閉じる設定をします。

overlayの設定

Window > Appearnace

Show the (X) close button

閉じる設定

画像の右上に表示させる「×」閉じるボタンを表示させるかどうかを設定します。デフォルトはチェックあり。

閉じるボタンの設定

訪問者が迷わないように表示しておくほうがベストだと思います。

 

Window > Behavior

Esc key stroke closes FancyBox

拡大した画像を閉じるときに、「ESC」キーを使えるかどうかを設定をします。デフォルトはチェックが入っています。

 

Images > Behavior

Close FancyBox when content is clicked

画像をクリックして閉じる

ポップアップで表示された画像部分ををクリックしても、画像を閉じれるように設定をします。デフォルトはチェックなし。

 

これら全てにチェックを入れておくと、どこをクリックしても画像を閉じることができるようになります。

 

画像の枠やタイトルの色を変更する

 

Window で設定します。

windowの設定

 Title color と Border Color

画像に表示する「タイトルの文字色」と「画像の枠色」の設定をします。3ケタの色コードで入力します。デフォルトは「#000(黒)」「#FFF(白)」に設定されています。

タイトルを「#060(緑)」、枠を「#E62(オレンジ)」に変更した例が下の画像です。

変更前と変更後のイメージ

枠線の幅

画像の周りに表示される枠線の幅を設定します。「0」~「100」で設定ができます。デフォルトは「10」です。空欄にすると枠線は「10」の幅、「0」を入れると枠線なしになります。

 

枠線を「30」に設定した例

枠線を30に設定

 

画像の表示に関する動きの設定

 

Window Behavior で設定します。

動きの設定

 Center while scrolling

スクロールをしたときに、常に表示された画像が中央に表示されるかどうかの設定をします。タッチデバイス(スマホやタブレット)では無効になります。

 

 Scale large content down to fit in the browser viewport

拡大表示された画像が、ブラウザーの画面内に収まるかどうかの設定をします。

理由がない限りチェックは入れておきましょう。その方が訪問者に対して親切ですよ~。

 

Opening speed と Closing speed

画像が拡大されるとき、閉じるときのスピードを設定します。デフォルトは「300」です。

数値が大きいほど、スピードが遅くなります。

 

まとめ

 

いかがでしたでしょうか?

初心者でもインストールするだけ、設定いらずで使えるっていうのが嬉しいプラグインです。

細かな設定をしていけば、自分らしいポップアップ表示を表現できるかもしれませんね。お試しくださいませ。

 

WordPressカテゴリの最新記事