WordPress Easy FancyBoxの使い方 画像をふわっと表示

本記事は広告が含まれる場合があります WordPressプラグイン

【画像をふわっと表示】Easy FancyBoxの使い方と設定方法

今回は、画像をクリックすると『ふわっ』と拡大表示するWordPressプラグイン「Easy FancyBox(イージーファンシーボックス)」の使い方と設定方法をご紹介します。

WordPressで作品ギャラリーを作りたいんですが、画像を押したらふわっと拡大表示するプラグインとかないんでしょうか??
画像をふわっと表示するプラグインとしては、「Easy FancyBox」が有名です。写真のギャラリー一覧を作って、ボタンをクリックすると、ふわっと拡大表示することができます。

 

■【画像をふわっと表示】Easy FancyBoxの使い方(動画解説版)

 

プラグインは便利ですが、古いプラグイン、ご利用のテーマやプラグインの組み合わせによっては、不具合を起こす場合もあります。すでに運用済みの本番環境で導入する場合は、事前にバックアップを取得しておく、必要に応じて検証環境を作って事前に試しておくなどが推奨されます。プラグインの導入は自己責任でお願いいたします。

 

 

画像をふわっと浮かせるギャラリープラグイン「Easy FancyBox」

Easy FancyBoxの概要

Easy FancyBox

Easy FancyBoxは、画像をクリックした時にふわっと浮かせることができるプラグインです。商品ギャラリーや作品ギャラリーなどを作りたい時におすすめです。


 

■公式サイト:Easy FancyBox | WordPress.org
 

注意点としては、Easy FancyBoxは、jQueryというjavascriptライブラリを利用していて、まれにご利用のテーマ・プラグインの相性で競合する・上手く動かない場合もあることにご注意ください。

不安な方は「テーマ名(or プラグイン名) Easy FancyBox」で検索してみて、不具合に関する情報がないか確かめてみるとよいでしょう。

 

Easy FancyBoxのインストール

まずは、Easy FancyBoxのインストールをしていきます。

「プラグイン>新規追加」を選択します。
プラグイン>新規追加

「Easy FancyBox」で検索して、表示された下記のプラグインを「今すぐインストール」します。
Easy FancyBoxのインストール
 

有効化ボタンを押下します。
Easy FancyBoxの有効化
 

以上で、Easy FancyBoxのインストールは完了です。

なお、EasyFancy Boxの使い方は簡単で、基本的にインストール・有効化したら設定は不要で、ブロック挿入時にリンク先をメディアファイルに設定するだけで使用できます。

ここからは具体的なEasy FancyBoxの使い方を説明していきます。

 

 

Easy FancyBoxの基本的な使い方

ここでは、ギャラリーブロックおよび画像ブロックで作成した画像をそれぞれふわっと表示させる方法をご紹介します。
 

ギャラリーブロックで作成したギャラリー画像をふわっと表示する

まずは、画像を横並びに配置する「ギャラリー画像」を作成してふわっと表示する使い方を覚えましょう。

使い方は簡単で、「ギャラリー」ブロックを挿入した後に「リンク先」を「メディアファイル」としてあげるだけでOKです。
Easy FancyBox ギャラリーブロックの場合。リンク先をメディアファイルに選択
 

 

ギャラリーブロックを選択して、任意のギャラリー画像を選択します。ギャラリーブロックを選択します。
 

右上の「設定」アイコンをクリックして、ギャラリーの設定で「リンク先」を「メディアファイル」に設定します。
ギャラリーの設定で「リンク先」を「メディアファイル」に設定
 

以上で表示画面に移動して、ギャラリーをクリックすると、クリックした画像がふわっと拡大表示されます。


 

また、拡大表示された画像は「×(または拡大写真の外側)」をクリックして閉じることができ、拡大画像右側の「>」(または画像左側の<)をクリックすると次の写真(または前の写真)に移動することができます。「×(または拡大写真の外側)」や左・右矢印
 

※なお、「クラシックエディター」ブロックを挿入してギャラリーを作成することもできます。

 


 

フワッと浮かせた画像にキャプションを表示する

画像に対してAltテキスト(代替テキスト)を設定してあげると、拡大表示時に、設定した内容がキャプションとして表示されます。
画像にalt属性(代替テキスト)を設定して、キャプションをつけている例
 

Altテキストは、画像ブロックの設定画面で入力することができます。
画像ブロックの設定画面で ALTテキスト(代替テキスト)の設定ができる
 

これで、画像をクリックすると拡大表示される画像にキャプションがついていることが分かります。


 

画像のキャプションとは違う点に注意

ギャラリー編集画面>画像選択時に入力されるキャプション欄とALT属性は違うため注意ください。
ギャラリー キャプションの設定
 
キャプション欄に入力すると(ふわっと浮かせる前の)ギャラリー画像に説明文章が下記のように表示されます(こちらはEasy FancyBoxの機能ではありません)
ギャラリー キャプションの設定

 


 
 

画像ブロックで作成した一枚の画像をふわっと表示させる

ギャラリーブロックだけではなく、「画像ブロック」を利用して表示させた一枚の画像をふわっと表示させることもできます。

画像ブロックの場合は、上ツールバーにあるリンクアイコンを選んでメディアファイルに選択することでふわっと表示することが可能です。

Easy FancyBox 画像ブロックの場合。リンクアイコンを選んでメディアファイルに選択
 

■画像ブロックでふわっと表示する設定をする


 


 

 

YouTube動画をEasy FancyBoxでふわっと表示させる方法

EasyFancy Boxを使うと、画像(あるいはテキスト)をクリックするとYouTube動画がポップアップ形式でふわっと表示される以下のような実装も可能です。


 

YouTube動画をポップアップ再生させるには「設定>メディア」で、YouTubeにチェックを入れておく必要があります。
YouTubeにチェックを入れる
 

まずは、画像ブロックを使ってYouTube動画の画像を表示します。画像ブロックを使ってYouTube動画の画像を表示
 

リンクアイコンをクリックして、リンク先にYouTube動画のURLを入力します。リンクアイコンをクリックしてYouTube動画のURLを選択する
 

これで、画像をクリックするとYouTube動画がふわっと拡大表示されるようになります。


 

 

 

Easy Fancy Boxの細かい設定

Easy FancyBoxの細かい設定は「設定>メディア」から設定することができます。

設定>メディア

WordPressのメディア設定画面が表示されると、下の方にEasy FancyBox用のオプション設定項目が追加されています。
設定>メディア>Easy FancyBoxの設定項目
 

基本的にはデフォルト設定のままで問題ありませんが、それぞれの設定項目の意味は下記の通りです。

設定項目 内容
Version(バージョン) Easy FancyBoxのバージョンが選択できます。タッチデバイスにも対応しているバージョンである「Classic Reloaded」が初期値になっています。
Media(メディア) Easy FancyBoxの対象とするメディアの種類を選択します。初期値は画像のみとなっていますが、PDFやYouTubeなどもふわっと浮かせる対象にすることができます。
Overlay(オーバーレイ) オーバーレイの設定(ふわっと浮かせている時に画像の外枠の背景に対してどうするか)ができます。オーバーレイを有効化するか、オーバーレイをクリックされた時に画像を閉じるか、透明度、色の設定などができます。
Window(ウインドウ) ふわっと浮かせている時の画像の周りの表示設定。×ボタンを表示するか、枠線をつけるか、余白を取るか、画像の大きさなどの設定ができます。
Miscellaneous(その他) その他色々な(Miscellaneous)設定。画像クリックした時のポップアップ、jQueryの設定などができます。
images(画像) 画像の設定。画像の識別子(jpg、png)の指定、ナビゲーションの表示、代替テキスト(alt属性)の表示などが設定できます。
難しい設定項目もあるので、初心者向けということでここでは割愛しますが、興味のある方は色々試してみてください。

 

 

まとめ

まとめです。今回は、画像をクリックすると『ふわっ』と拡大表示するWordPressプラグイン「Easy FancyBox(イージーファンシーボックス)」の使い方と設定方法をご紹介しました。

■【画像をふわっと表示】Easy FancyBoxの使い方(動画解説版)


 

これで作品ギャラリーを作ることができそうです!
「Easy FancyBox」では、商品や作品のギャラリーでふわっと浮かせたい時に利用できるので、ぜひ活用してみてくださいね。

なお、そのほかのよく使うおすすめプラグイン一覧を「WordPressおすすめプラグインを一覧・目的別紹介」でご紹介していますので、プラグインをお探しの方はあわせてご参考いただけると幸いです。

今回は以上になります。最後までご覧いただきありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

-WordPressプラグイン
-