今回は、画像をクリックすると『ふわっ』と拡大表示するWordPressプラグイン「Easy FancyBox(イージーファンシーボックス)」の使い方と設定方法をご紹介します。
■【画像をふわっと表示】Easy FancyBoxの使い方(動画解説版)
もくじ
プラグインは、スマートフォンのアプリのように、好きな機能をWordPress本体に組み込むことができる機能です。プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。
そのためすでに運用済みの本番環境で導入する場合は、事前にバックアップを取得しておく、必要に応じて検証環境を作って事前に試しておくなどが推奨されます。プラグインの導入は自己責任でお願いいたします。
ふわっと浮かせるギャラリープラグインEasy Fancy Boxの導入
Easy Fancy Boxの概要
Easy Fancy Boxは、画像をクリックした時にふわっと浮かせることができるプラグインです。商品ギャラリーや作品ギャラリーなどを作りたい時に活用できるプラグインです。
■公式サイト：Easy FancyBox | WordPress.org
注意点としては、Easy FancyBoxは、jQueryというjavascriptライブラリを利用していて、まれにご利用のテーマ・プラグインの相性で競合する・上手く動かない場合もあることにご注意ください。
Easy FancyBoxのインストール
まずは、Easy FancyBoxのインストールをしていきます。プラグイン＞新規追加を選択します。
「easy fancybox」で検索して、表示された下記のプラグインを「今すぐインストール」します。
有効化ボタンを押下します。
以上で、Easy FancyBoxのインストールは完了です。
EasyFancy Boxの使い方は簡単です。基本的にインストール・有効化したら設定は不要で、ブロック挿入時にリンク先をメディアファイルに設定するだけです。
ここからは具体的なEasy FancyBoxの使い方を説明していきます。
Easy FancyBoxの基本的な使い方
ギャラリー画像を作成してふわっと表示する
まずは、ギャラリー画像を作成してふわっと表示する使い方を覚えましょう。
使い方は簡単です。ギャラリーブロックを挿入した後でリンク先：メディアファイルに設定するだけです。
ギャラリーブロックを選択して、任意のギャラリー画像を選択してください。
右上の「設定」アイコンをクリックして、ギャラリーの設定でリンク先：メディアファイルを選択すればOKです。
表示画面に移動して、ギャラリーをクリックしてみましょう。
クリックした画像がふわっと拡大表示されます。×(または拡大写真の外側)をクリックして閉じることができます。拡大画像右側の「＞」（または画像左側の＜）をクリックすると次の写真（または前の写真）に移動することができます。
※なお、「クラシックエディター」ブロックを挿入してギャラリーを作成することもできます。
旧エディター「クラシックエディター」をご利用の方は、クラシックエディターでもEasy FancyBoxをご利用可能です。
固定ページまたは投稿の新規画面を開き、「メディアを追加」ボタンを押下します。
「ギャラリーを作成」を選択します。
ギャラリーに追加したい画像をクリックして選択後、「ギャラリーを作成」ボタンを押下します。
リンク先を「メディアファイル」に変更します。ここでは、カラム(何列表示するか)を「3」、サイズを「大サイズ」にして「ギャラリーを挿入」ボタンを押下します。
※クラシックエディターを使いたい人は、「【Classic Editor】WordPress5系でグーテンベルクから従来エディターに戻す方法」をご参照ください。
画像のキャプションを利用する
画像に対してキャプションを設定すると、ギャラリー表示時に、キャプションに入力したテキストが表示されます。
キャプションは、ギャラリー編集画面から画像を選択して入力することができます。
ギャラリー表示時に、キャプションに入力したテキストが表示されています。
一枚の画像でふわっと表示する
ギャラリー画像だけではなく、一枚の画像でふわっと表示することもできます。
画像ブロックの場合は、上ツールバーにあるリンクアイコンを選んでメディアファイルに選択することでふわっと表示することが可能です。
■画像ブロックでふわっと表示する設定をする
旧エディター「クラシックエディター」をご利用の方は、クラシックエディターでもEasy FancyBoxをご利用可能です。
投稿(または固定ページ)編集画面で「メディアを追加」ボタンを押下します。
通常通り、画像を追加を選択し、リンク先をメディアファイルに変更後、画像を挿入ボタンを押下します。
プレビューで確認した時に、画像をクリックしてみましょう。
画像がふわっと拡大表示されることが確認できます。
Easy Fancy Boxの細かい設定
Easy FancyBoxの細かい設定は、設定＞メディアから設定することができます。
WordPressのメディア設定画面が表示されます。中にEasy FancyBox用のオプション設定項目が追加されています。
それぞれの設定項目の意味は下記の通りです。
| 設定項目 | 内容 |
|---|---|
| メディア | Easy FancyBoxの対象とするメディアの種類を選択します。初期値は画像のみ。PDFやYoutubeなどもふわっと浮かせる対象にすることができます。 |
| オーバーレイ | オーバーレイの設定(ふわっと浮かせている時に画像の外枠の背景に対してどうするか)ができます。オーバーレイを有効化するか、オーバーレイをクリックされた時に画像を閉じるか、透明度、色の設定ができます。 |
| ウインドウ | ふわっと浮かせている時の画像の周りの表示設定。×ボタンを表示するか、枠線をつけるか、余白を取るか、画像の大きさなどの設定ができましす。 |
| その他 | その他色々な(Miscellaneous)設定ができます。画像クリックした時のポップアップ、jQueryの設定など |
| 画像 | 画像の設定。画像の識別子(jpg、png)の指定、ナビゲーションの表示、代替テキスト(alt属性)の表示などが設定できます。 |
まとめ
まとめです。今回は、画像をクリックすると『ふわっ』と拡大表示するWordPressプラグイン「Easy FancyBox(イージーファンシーボックス)」の使い方と設定方法をご紹介しました。
■【画像をふわっと表示】Easy FancyBoxの使い方(動画解説版)
なお、そのほかのよく使うおすすめプラグイン一覧を「WordPressおすすめプラグインを一覧・目的別紹介」でご紹介していますので、プラグインをお探しの方はあわせてご参考いただけると幸いです。
今回は以上になります。最後までご覧いただきありがとうございました。
あわせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
」の使い方と設定方法をご紹介します。 WordP){kind=link}