【WordPressプラグイン】Easy Fancy Boxで画像をふわっと浮かせるやり方

WordPress

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

2019年7月26日

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

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

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

 


 

わあ!Easy FancyBoxいいですね!ぜひこれを私のWordPressにも使ってみたいです。

 


 

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


 

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

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

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

 
 

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

Easy Fancy Boxの概要

プラグイン EasyFancyBox
 

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


 

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

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

Easy FancyBoxのインストール

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

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

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

以上で、Easy FancyBoxのインストールは完了です。引き続き、Easy FancyBoxの使い方を説明していきます。
 
 

Easy FancyBoxの基本的な使い方

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

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


 

補足)ブロックエディターをご利用の場合

本記事では、クラシックエディター版での説明で進めていきます。Classic Editorについては詳しくは「【Classic Editor】WordPress5系でグーテンベルクから従来エディターに戻す方法」をご参照ください。
 

ブロックエディター(グーテンベルクエディター)をご利用の場合は、「クラシックエディター」ブロックを挿入してギャラリーを作成します。

 

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

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

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

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

ギャラリーが追加されました。プレビューボタンを選択してみましょう。
ギャラリーが追加されました。プレビューボタンを選択
 

ギャラリーが表示されました。任意の画像をクリックします。
ギャラリーが表示されました。任意の画像をクリックします
 

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

なお、スマートフォンの場合でもPC表示の時と同様にギャラリー画像が並びます。
ギャラリー(スマートフォン表示)
 

タップするとギャラリー画像が拡大されます。
ギャラリー拡大イメージ(スマートフォン表示)
 

ギャラリー画像の編集

一度作ったギャラリー画像は再度編集することができます。投稿(または固定ページ)編集画面でギャラリー画像周辺にカーソルを合わせてクリックすると編集アイコンが表示されるのでクリックします。


 

ギャラリーの編集画面が表示されます。
ギャラリー編集画面
 

ドラッグ&ドロップで画像の順番を変えたり、画像を新規追加したり、削除したりすることができます。


 
 

画像の代替テキスト(Alt属性)を利用する

画像に対して代替テキスト(Alt属性)を入力する(入力されている)と、画像拡大表示時に、代替テキストに入力したテキストが表示されます。
画像拡大表示時に、代替テキストに入力した説明文が表示される
 

代替テキストは、ギャラリー編集画面から画像を選択して入力することができます。
画像の代替テキスト(Alt属性)に画像の説明文を入力
 

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

画像に対してキャプションを入力する(入力されている)と、ギャラリー表示時に、キャプションに入力したテキストが表示されます。
ギャラリー一覧でキャプションに入力した説明文が表示される
 

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

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

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


 

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

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

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

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

Easy Fancy Boxの細かい設定

Easy FancyBoxの細かい設定は、インストール済みプラグイン>Easy FancyBox>設定から設定することができます。


 

プラグイン>インストール済みプラグインを選択します。
プラグイン>インストール済みプラグインを選択
 

Easy FancyBoxの「設定」をクリックします。
Easy FancyBoxの「設定」をクリック
 

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

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

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

 

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

 
 

まとめ

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


 

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

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

 

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


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

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

詳細はこちら


 

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

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

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

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

-WordPress
-,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.