Easy FancyBoxで画像とYouTubeをポップアップ表示
前々回にブロックエディターでYouTubeブロックで簡単に動画を埋め込む方法を紹介しました。
しかし、動画を拡大するには、拡大ボタンを押す必要があり、少し手間がかかります。そこで、サムネイル画像をクリックするとYouTubeが、ポップアップで拡大表示できる「Easy FancyBox」プラグインを紹介します。
出典 : Easy FancyBox
また、このプラグインで、スライド付きの画像ポップアップを作成します。ブロックエディターのギャラリーをそのまま使用できるので、プラグインページに移動する必要がなく、大変便利です。
今回は、アクリルフィギュアのシングルページをDEMOに説明します。
ギャラリー部分もブロックエディターなので、前回紹介した、「Blocks Animation」でアニメーションをつけました。
カバー、ギャラリーなどの画像を「フェードイン」、見出し、テキストを「上へフェードイン」で、共に速度「やや低速」で設定しています。
カバーを選択してアニメーション＞フェードイン
見出しを選択してアニメーション＞上へフェードイン
では、本題です。プラグインをインストールしたら、左のサイドメニューの設定＞メディアをクリックします。本来これは、ワードプレスの画像サイズの設定画面ですが、その下に「FancyBox」というEasy FancyBoxの設定画面が追加されます。
多くの設定項目がありますが、今回デフォルトから設定を変更した箇所を説明します。
設定＞メディアをクリック
メディアサイズ設定の下にEasy FancyBoxの設定画面
Version
モダールのスタイルで、3種類あり動きに違いがありますが、「Legacy」を選択します。
| 設定項目 | 設定値 |
|---|---|
| Version | Legacy |
メディア
デフォルトでは、今回YouTubeのモダールウィンドウを作成するので、メディアの「YouTube」のチェックボックスをクリックし、有効にします。
| 設定項目 | 設定値 |
|---|---|
| YouTube | チェック有 |
オーバーレイ
画像をクリックした時に、拡大写真の下に表示されるモダールの色と、透明度を変更することができます。基本的に、デフォルトのままでいいのですが、今回は色を黒（#000）に変更しました。
| 設定項目 | 設定値 |
|---|---|
| 色 | #000 |
ギャラリー
ポップアップスライダーの画像切り替わりのフェードをなくすために、変更速度、フェード速度を0にします。
| 設定項目 | 設定値 |
|---|---|
| 変更速度 | 0 |
| フェード速度 | 0 |
YouTube
YouTubeのモダールウィンドウの最大サイズを指定します。今回DEMOでは、サムネイル画像を幅最大700に指定しているので、それよりも大きな幅1300、高さ731に指定しました。横最大1500、縦最大900まで指定できます。
YouTubeの縦横比
YouTube動画のHDのサイズ比は16:9です。Easy FansyBoxのYouTubeサイズは、縦横共に指定しないといけません。今回は、余白を入れないように、幅を1300で計算して(1300/16*9)高さ731にしました。
| 設定項目 | 設定値 |
|---|---|
| 幅 | 1300 |
| 高さ | 731 |
これで設定は終了です。投稿画面から作成していきます。
ポップアップギャラリー
まず、ブロックエディターのギャラリーを作成します。ギャラリーブロック＞メディアライブラリーから写真を複数選択し「ギャラリーを作成」をクリックます。「ギャラリーを編集」で表示したい順番に並べ替え「ギャラリーを挿入」をクリックします。
ギャラリー＞メディアライブラリーをクリック
ギャラリーに載せたい画像を選択し、「ギャラリーを作成」をクリック
順番を入れ替え、「ギャラリーを挿入」をクリック
右サイドバーの設定からカラムの設定を3に設定します。写真を選択し、「リンク」から「メディアファイル」を選択します。残りの写真も同じように設定します。
これでポップアップの作成の完了です。
ブロック＞設定＞カラムを3に設定
画像を選択し、リンク＞メディアファイルをクリック
YouTube
最後にYouTubeのポップアップを作成します。まず、リンクさせたいサムネイル画像をカラムに配置して、カラムのサイズを700pxに設定します。画像を選択し、「リンク」をクリックし、テキストボックスに、YouTubeのリンクURLを入力します。
これで、設定の完了です。
サムネイルのカラムを選択し、ブロック＞カラム設定＞700pxに設定
リンク＞テキストボックスにYouTubeのURLを入力
このプラグインは、デザインの変更は、ほとんど出来ませんが、設定がとても簡単です。CMSはいろいろな人が投稿ページの作成や更新をするので、使い易いという点で、とても優れたプラグインだと思います。Webサイトの作成のご依頼はコンタクトフォームよりよろしくお願いします。
