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

WordPress

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

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

WordPressで作品ギャラリーを作りたいんですが、画像を押したらふわっと拡大表示するプラグインとかないんでしょうか??

画像をふわっと表示するプラグインとしては、「Easy FancyBox」が有名です。写真のギャラリー一覧を作って、ボタンをクリックするとふわっと拡大表示することができます。

 


 

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


 


 

プラグインを導入する上での注意事項

ホームページ Unavaiableプラグインは、スマートフォンのアプリのように、好きな機能をWordPress本体に組み込むことができる機能です。プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。
 

そのためすでに運用済みの本番環境で導入する場合は、事前にバックアップを取得しておく、必要に応じて検証環境を作って事前に試しておくなどが推奨されます。プラグインの導入は自己責任でお願いいたします。

 
 

ふわっと浮かせるギャラリープラグインEasy Fancy Boxの導入

Easy Fancy Boxの概要

Easy FancyBox
 

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

 
 

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

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

Easy FancyBoxのインストール

まずは、Easy FancyBoxのインストールをしていきます。プラグイン>新規追加を選択します。
プラグイン>新規追加
 

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

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

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

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

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

Easy FancyBoxの基本的な使い方

ギャラリー画像を作成してふわっと表示する

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

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


 

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

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

表示画面に移動して、ギャラリーをクリックしてみましょう。
表示画面。ギャラリーをクリックしてみましょう。
 

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

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


 

補足)旧エディター「クラシックエディター」をご利用の場合

旧エディター「クラシックエディター」をご利用の方は、クラシックエディターでもEasy FancyBoxをご利用可能です。
 


 

固定ページまたは投稿の新規画面を開き、「メディアを追加」ボタンを押下します。
メディアを追加ボタンを押下
 

「ギャラリーを作成」を選択します。
「ギャラリーを選択」を選択
 

ギャラリーに追加したい画像をクリックして選択後、「ギャラリーを作成」ボタンを押下します。
ギャラリーに追加したい画像をクリックして選択。ギャラリーに挿入をクリック
 

リンク先を「メディアファイル」に変更します。ここでは、カラム(何列表示するか)を「3」、サイズを「大サイズ」にして「ギャラリーを挿入」ボタンを押下します。
リンク先をメディアに変更
 

※クラシックエディターを使いたい人は、「【Classic Editor】WordPress5系でグーテンベルクから従来エディターに戻す方法」をご参照ください。
 

 

画像のキャプションを利用する

画像に対してキャプションを設定すると、ギャラリー表示時に、キャプションに入力したテキストが表示されます。
ギャラリー キャプション表示
 

キャプションは、ギャラリー編集画面から画像を選択して入力することができます。
ギャラリー キャプションの設定
 
ギャラリー キャプションの設定
 

ギャラリー表示時に、キャプションに入力したテキストが表示されています。
ギャラリー キャプション表示
 

一枚の画像でふわっと表示する

ギャラリー画像だけではなく、一枚の画像でふわっと表示することもできます。
 

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

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


 

補足)旧エディター「クラシックエディター」をご利用の場合

旧エディター「クラシックエディター」をご利用の方は、クラシックエディターでもEasy FancyBoxをご利用可能です。
 


 

投稿(または固定ページ)編集画面で「メディアを追加」ボタンを押下します。
メディアを追加ボタンを押下

通常通り、画像を追加を選択し、リンク先をメディアファイルに変更後、画像を挿入ボタンを押下します。
画像を選択してリンク先をメディアファイルに変更後、画像を挿入
 

プレビューで確認した時に、画像をクリックしてみましょう。
プレビューで画像が表示されるので、画像をクリックします。
 

画像がふわっと拡大表示されることが確認できます。
画像がふわっと拡大表示されました。
 

 

Easy Fancy Boxの細かい設定

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

WordPressのメディア設定画面が表示されます。中にEasy FancyBox用のオプション設定項目が追加されています。
メディア設定。Easy FancyBoxの設定が可能
 

それぞれの設定項目の意味は下記の通りです。

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

 

難しい設定項目もあるので、初心者向けということでここでは割愛しますが、興味のある方は色々試してみてください。

 
 

まとめ

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

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


 

これで作品ギャラリーを作ることができそうです!

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

 

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

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

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

詳細はこちら

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

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

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


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, , ,