• HOME > 
  • WordPress > 
  • ワードプレスのEasy FancyBoxの使い方【画像のポッ...

ワードプレスのEasy FancyBoxの使い方【画像のポップアップ表示】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2021年09月03日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

画像のポップアップ表示とは?

WEBサイトのページで画像をクリックすると、背景が暗くなり画像がふわっと浮き上がるように大きく表示されるという機能を見たことはないでしょうか?

そのような拡大表示の方法が「ポップアップ表示」と呼ばれています。

ショッピングサイトの商品の画像など、細部まで見てもらう必要がある場合に多く使われる表示方法です。

画像のポップアップ表示の例

ポップアップ表示させるメリット

小さい画像のみの場合ユーザーは画像を探しやすくなりますが、一枚一枚の画像の細かい部分を見ることができません。

反対に大きい画像ばかりでは、ユーザーが見たい画像にたどり着くまでに時間がかかってしまいます。

一覧表示では小さい画像を並べておきユーザーがクリックすると大きい画像が開くというようにしておくことで、全体のレイアウトを見やすくしつつ細部まで見たいというニーズにも応えることが可能です。

画像のポップアップのイメージ

ユーザビリティを向上させることができるので多くのサイトで導入されている機能です。

ポップアップ表示の実装方法

通常WEBサイトで画像をポップアップ表示させるには、HTMLとCSSで作るかJavascriptでプログラミングしなければなりませんが、どちらも専門知識が必要で簡単ではありません。しかし、ワードプレスであればプラグインを利用することで簡単にポップアップ表示を使うことができます。

ポップアップ表示用のプラグインには様々なものがありますが、このページでは代表的なもののひとつである「Easy FancyBox」の使い方を解説します。

「Easy FancyBox」プラグインの使い方

「Easy FancyBox」プラグインをインストールするところから、実際にポップアップ表示させるまでを順を追って説明していきます。

プラグインの使用は、サイトに予期せぬ不具合をもたらす場合があります。バックアップを取ったうえで、あくまでも自己責任でご使用をお願い致します。

リンク先のサムネイル
ワードプレスのプラグインとは?【使い方解説】

ワードプレスの拡張機能であるプラグインをインストールして使用する手順から、削除などの管理の方法、そしてプラグインの種類について説明します。ワードプレスは初期状態では記事作成などの機能しか備わっていないので必要な機能だけをプラグインという形で好きなように追加して使用します。...【もっと読む】

インストールして有効化

まずはプラグインをインストールし、有効化させてください。

ワードプレスの管理画面左側のメニューからプラグインの「新規追加」をクリックし、「Easy FancyBox」で検索します。

EasyFancyBox

インストールして有効化します。

EasyFancyBox

画像ごとにポップアップ表示を指定する

プラグインを有効化できたら、実際に画像がポップアップ表示するように設定していきます。

「Easy FancyBox」プラグインによる画像のポップアップ表示の仕組みは、実は「aタグによるリンク」です。

画像にリンクを設定すればポップアップ表示ができます。

投稿ページ(もしくは固定ページ)の編集画面から画像の挿入とリンクの設定を行います。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

まず画像ブロックでページに画像を挿入します。

EasyFancyBox

挿入した画像の「リンクを挿入」ボタンをクリックします。

EasyFancyBox

URLは入力せず、その下の「メディアファイル」をクリックします。

EasyFancyBox

画像にリンクを設定できました。

EasyFancyBox

実際にページを開いて画像をクリックして確認してみてください、クリックでポップアップ表示されるようになっていると思います。

ポップアップされたときのサイズは元々の画像のサイズ

この時の画像のサイズは、元々の画像サイズです。画像サイズが大きければブラウザのウィンドウサイズ目一杯に広がって表示されますが、小さいサイズの場合はポップアップ表示はされても画像は小さいままなので注意が必要です。

ギャラリーをポップアップ表示する

ワードプレスのエディターに標準で備わっている「ギャラリー」ブロックもポップアップ表示可能です。

こちらも先ほどと同様に画像にリンクを設定することでポップアップ表示ができます。

EasyFancyBox

ギャラリーブロックの場合は右側に「リンク先」設定がありますので、先程同様にリンク先を「メディア」に指定して下さい。

EasyFancyBox

ギャラリーをポップアップした場合は、ポップアップに矢印が表示されポップアップ状態でギャラリーの画像をスライドさせて見ることができます。

Easy FancyBoxの設定画面

上記のように簡単にポップアップ表示が実装できる「Easy FancyBox」プラグインですが、設定画面では細かい調整を行うこともできます。

プラグインを有効化すると、管理画面の「設定」の「メディア」の設定画面内に「Easy FancyBox」の項目が追加されます。

EasyFancyBoxの設定

設定画面ではポップアップ出現時のアニメーションなどを変更することが出来るのでサイトに合わせて調整してみてください。

まとめ

以上が「Easy FancyBox」プラグインを使用して画像をポップアップ表示する方法です。ポップアップ表示を実装するためにはCSSやJavascriptを使って作らなくてはなりませんでしたが、ワードプレスのプラグインを使用すれば簡単に実装できて、サイトのユーザビリティを高めることができます。

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPでカスタム投稿タイプを追加してページを分類する方法

2024年12月03日
WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。 カスタム投稿タイプとは? WordPressでは、標 […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]