画像・オリジナル作品をサイトに投稿している方は、WordPress プラグイン「Easy FancyBox」を使っている人も多いのではないでしょうか。使っていない人は、ぜひこの機会に検討してみてください。
この「Easy FancyBox」は、画像をクリックすると「ふわっ」と拡大表示することができます。
ちなみに、コードを記述することで実現することもできます。
自身のサイトに、本当に必要か検証してから導入してください。
それでは、使い方と設定方法を「ふわっと」紹介したいと思います。
目次
プラグイン Easy FancyBox をインストールする
まず、WordPress 管理画面からプラグインから「新規追加」を選択します。
追加画面の検索バーに「Easy FancyBox」と入力します。
「今すぐインストール」をクリックしてインストールします。完了したら「有効化」をクリックしてください。
プラグイン Easy FancyBox の使い方
試しに、ギャラリーブロック、画像ブロックで作成した画像をそれぞれ「ふわっと」表示させる方法をご紹介します。
画像ブロックの場合
ブロックの追加して必要な画像を挿入してください。
画像を選択して「リンクを挿入」を選択します。選択の中にある「メディアファイル」を選択します。
これで、挿入した画像が「ふわっと」拡大します。
ギャラリーブロックの場合
まず、ギャラリーブロックを選択して必要な画像を挿入してください。
次に、ブロック「ギャラリー」を選択して、右側にある設定の「リンク先」を「メディアファイル」に設定します。
以上でギャラリーブロックの設定は完了です。また、画像ブロックと同様に個別に選択して、「リンクの挿入」することもできます。
「ふわっと」表示した画像
拡大表示された画像は「閉じるボタン」をクリックして閉じることができます。拡大画像右側の「＞」または左側の「＜」をクリックすると次のスライドに移動します。
これは「Easy FancyBox」の一般設定である程度変更できます。
キャプションを表示する
画像に対して代替テキスト(Alt属性)を設定してあげると、拡大表示時に、設定した内容がキャプション表示されます。
代替えテキスト(Alt属性)の設定
画像を選択して右側の設定画面を表示します。その中にある「代替えテキスト」に入力します。
設定が終わったら確認をします。画像下に先ほど入力した代替えテキスト(Alt属性)が表示されているはずです。
画像追加時のキャプション
画像を追加する時、入力する項目があるかと思います。
その中にある、画像追加時の「キャプション」はEasy FancyBox の「キャプション」とは違います。
ここで、キャプションを入力してもEasy FancyBox では表示されません。実際には、追加後の画面に表示される個所になります。
また、このキャプション表示はEasyFancyBox で「ふわっと」表示させることができません。
プラグイン Easy Fancy Boxの設定
次に設定ですが、WordPress 管理画面に「Lightbox」の項目が追加されます。
基本的にはデフォルト設定のままで問題ありませんが、YouTubeなども拡大表示したい場合は設定が必要になります。
それぞれの設定項目の意味は下記の通りです。
今回、説明はデフォルト値の状態で説明します。
Choose Lighbox Version
Easy FancyBox のバージョンが選択できます。タブレット端末にも対応しているバージョン「Classic Reloaded」がデフォルト値になっています。種類は以下の3種類が選択できます。
次にバージョンの設定になります。
この設定は、各バージョンごとに設定することができます。
FancyBox Classic: Enable
この設定は、どのタイプを「ふわっと」させるかを選択します。デフォルトでは「Enable for Images」画像のみとなっています。
YouTubeなどを有効にしたい場合はここで設定します。
FancyBox Classic: Window Appearance
これは、浮かせている時の画像の周りの表示設定になります。
この時の状態に関する設定です。例えば、閉じるボタンを表示するか、枠線をつけるか、余白の設定、画像の大きさなどです。また、表示速度に関する設定も可能です。
FancyBox Classic: Overlay Appearance
オーバーレイに関しての設定になります。
この時の状態に関する設定です。オーバーレイを有効化するか、クリックされた時に画像を閉じるか、透明度、色の設定などができます。
FancyBox Classic: その他
その他、上記になかった設定になります。例えば、画像クリックした時のポップアップに関する設定などがあります。
ここまでがEasyFancyBox の共通の設定になります。
ここ先は、「FancyBox Classic: Enable」で有効にした項目に対しての設定になるため、今回は割愛させていただきます。
まとめ
いかがだったでしょうか。
今回は、画像をクリックすると「ふわっ」と拡大表示するWordPressプラグイン「Easy FancyBox」の使い方と設定方法を紹介しました。
ここまでお読みいただき、ありがとうございました。
コメント