Easy FancyBoxでサイトの画像・文章をポップアップ表示

投稿日:

 
Easy FancyBox,ポップアップ,プラグイン
Easy FancyBox,ポップアップ,プラグイン

Easy FancyBoxとは、サイト内の画像をクリックすると、拡大してポップアップ表示してくれるWordPressプラグインです。画像以外に動画や文章、PDFなどにも対応しています。また、複数枚の画像をスライドショー形式にポップアップ表示するギャラリー機能にも対応していて、JavaScriptを使うことなく、サイトの見栄えがよくなる便利なプラグインです。

Easy FancyBoxの使い方:インストールと有効化

Easy FancyBoxを使えるようにするには、プラグインのインストールと有効化を行います。

1.プラグインのインストール手順

管理画面より「プラグイン」→「新規追加」をクリックします。表示された「プラグインの追加」画面の右上にある「検索ボックス」に「Easy FancyBox」を入力すると、一番上の左に「Easy FancyBox」欄があります。「Easy FancyBox」欄の右上にある「今すぐインストール」をクリックしてインストールします。すでにインストールされている場合は「有効化」が表示されます。

プラグインのインストール手順

2.プラグインの有効化手順

インストールが完了すると、「今すぐインストール」が「有効化」に変わります。その「有効化」をクリックして完了です。

プラグインの有効化手順

Easy FancyBoxの使い方:画像のポップアップ表示

画像をポップアップ表示するには、メディアを追加する際にリンク先をメディアファイルに変更します。

1.メディアの追加

「投稿の編集」より、「メディアを追加」をクリックします。すると、「メディアを追加」画面が表示されます。

メディアの追加

2.画像の追加・選択

「メディアを追加」画面より、「ファイルをアップロード」から画像を追加するか、「メディアライブラリ」から画像を選択します。すると、「メディアを追加」画面の右側に「添付ファイルの詳細」が表示されます。

画像の追加・選択

3.リンク先の変更

「添付ファイルの詳細」の下にある「添付ファイルの表示設定」より、「リンク先」をクリックして「メディアファイル」を選択し、「投稿に挿入」をクリックして完了です。

画像のリンク先の変更

Easy FancyBoxの使い方:ギャラリー画像のポップアップ表示

WordPressのギャラリー機能も、リンク先をメディアファイルに変更することでポップアップ表示することができます。

1.メディアの追加

「投稿の編集」より、「メディアを追加」をクリックします。すると、「メディアを追加」画面が表示されます。

メディアの追加

2.ギャラリーの作成

「メディアを追加」画面左のメニューより、「ギャラリーを作成」をクリックして画像を複数枚追加・選択し、画面右下の「ギャラリーを作成」ボタンをクリックします。すると、「ギャラリーを編集」画面が表示されます

ギャラリーの作成

3.リンク先の変更

「ギャラリーを編集」画面より、「ギャラリーの設定」の「リンク先」をクリックして「メディアファイル」を選択し、「ギャラリーを挿入」をクリックして完了です。

ギャラリーのリンク先の変更

Easy FancyBoxの使い方:文章のポップアップ表示

文章など画像以外のファイルをポップアップ表示するには、メディアの設定を変更する必要があります。

1.メディア設定

管理画面より、「設定」→「メディア」をクリックします。すると、「メディア設定」画面が表示されます。

メディア設定

2.ファイル形式の選択

「メディア設定」画面の「FancyBox」より、「Media」の「Inline content」をクリックして選択し、「変更を保存」をクリックします。ここでは、文章以外にもポップアップ表示するファイル形式を選択することができます。

ファイル形式の選択

3.コードの入力

「投稿の編集」より、テキストエディタで下記コードを入力します。

<a class="fancybox-inline" href="#inline-sentence">元の文字</a>

<div class="fancybox-hidden"><div id="inline-sentence">ポップアップ表示文章</div></div>

コードの入力

Easy FancyBoxのまとめ

サイト内の画像を簡単にポップアップ表示することができるWordPressプラグイン「Easy FancyBox」を紹介しました。プラグインをインストールして有効化するだけで、画像を追加する時にリンク先をメディアファイルに変更するだけで表示画像をポップアップ表示することができるようになります。さらに、ギャラリー機能や文章のポップアップ表示にも対応した便利なプラグインになっています。

投稿者:

-サムネイル, プラグイン, 画像
-, ,

Copyright© FreesoftConcierge , 2019 All Rights Reserved.