![](https://cxg-design.jp/wp-content/uploads/2024/01/f9c10120a2554db5fd93badfc561d77d.jpg)
Easy FancyBoxで画像とYouTubeをポップアップ表示
前々回にブロックエディターでYouTubeブロックで簡単に動画を埋め込む方法を紹介しました。
しかし、動画を拡大するには、拡大ボタンを押す必要があり、少し手間がかかります。そこで、サムネイル画像をクリックするとYouTubeが、ポップアップで拡大表示できる「Easy FancyBox」プラグインを紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/01/5f66a3309b7a4d7b53195679e74460f2.png)
出典 : Easy FancyBox
また、このプラグインで、スライド付きの画像ポップアップを作成します。ブロックエディターのギャラリーをそのまま使用できるので、プラグインページに移動する必要がなく、大変便利です。
今回は、アクリルフィギュアのシングルページをDEMOに説明します。
ギャラリー部分もブロックエディターなので、前回紹介した、「Blocks Animation」でアニメーションをつけました。
カバー、ギャラリーなどの画像を「フェードイン」、見出し、テキストを「上へフェードイン」で、共に速度「やや低速」で設定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/01/4284388c929f68f74a00acc6afe43313.png)
カバーを選択してアニメーション>フェードイン
![](https://cxg-design.jp/wp-content/uploads/2024/01/4284388c929f68f74a00acc6afe43313.png)
見出しを選択してアニメーション>上へフェードイン
では、本題です。プラグインをインストールしたら、左のサイドメニューの設定>メディアをクリックします。本来これは、ワードプレスの画像サイズの設定画面ですが、その下に「FancyBox」というEasy FancyBoxの設定画面が追加されます。
多くの設定項目がありますが、今回デフォルトから設定を変更した箇所を説明します。
![](https://cxg-design.jp/wp-content/uploads/2024/01/11c298c3e0f056ac6036b5624d50f0cc.png)
設定>メディアをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/01/912a6966c3a38a9bfb96cb6f81e8fbf9.png)
メディアサイズ設定の下に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 |
これで設定は終了です。投稿画面から作成していきます。
ポップアップギャラリー
![](https://cxg-design.jp/wp-content/uploads/2024/01/e4346eaab2aa4023d61389782a607fe1.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/2468f78efcda33eaf6968935bc50aa1a.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/83d999be2f83e4eb7e6dd6c74b4e1ec9-1.png)
まず、ブロックエディターのギャラリーを作成します。ギャラリーブロック>メディアライブラリーから写真を複数選択し「ギャラリーを作成」をクリックます。「ギャラリーを編集」で表示したい順番に並べ替え「ギャラリーを挿入」をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/01/59cf3c2737da8f1f8e92213b19615849.png)
ギャラリー>メディアライブラリーをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/01/75e32e96b5a57212d036620ca7bfcd24.png)
ギャラリーに載せたい画像を選択し、「ギャラリーを作成」をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/01/d952909fcc5cb220c365c7f7ea71a10d.png)
順番を入れ替え、「ギャラリーを挿入」をクリック
右サイドバーの設定からカラムの設定を3に設定します。写真を選択し、「リンク」から「メディアファイル」を選択します。残りの写真も同じように設定します。
これでポップアップの作成の完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/605e5587920a9c65c1691800a49c7717.png)
ブロック>設定>カラムを3に設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/67f09572ea0a05d1fba13fa7c776b100.png)
画像を選択し、リンク>メディアファイルをクリック
YouTube
![](https://cxg-design.jp/wp-content/uploads/2024/01/cd1956bfefd88f59b44b2bb28a37d574.png)
最後にYouTubeのポップアップを作成します。まず、リンクさせたいサムネイル画像をカラムに配置して、カラムのサイズを700pxに設定します。画像を選択し、「リンク」をクリックし、テキストボックスに、YouTubeのリンクURLを入力します。
これで、設定の完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/bfed9dadd01b395be325a16e4f93dc84.png)
サムネイルのカラムを選択し、ブロック>カラム設定>700pxに設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/fec9d281f3bfdf4a8871c374f7a8a103.png)
リンク>テキストボックスにYouTubeのURLを入力
このプラグインは、デザインの変更は、ほとんど出来ませんが、設定がとても簡単です。CMSはいろいろな人が投稿ページの作成や更新をするので、使い易いという点で、とても優れたプラグインだと思います。Webサイトの作成のご依頼はコンタクトフォームよりよろしくお願いします。