Web制作

Easy Fancy Box が使えた!

Easy Fancy Box が使えた!
さくらD
さくらD

さくらデトロイトです。[YouTube] [X] もやってます。

前回の記事で WordPressのプラグイン Easy Fancy Box が使えなかった件ですが、使うことができました!

追記 2023/07/04

Easy Fancy Box はスマホ表示の場合、拡大した画像を閉じるとページトップに戻ってしまう不具合があるのですが、設定で Version を Legacy にすると不具合が出なくなりました!😆

FancyBox for WordPress を代わりに使用していましたが、動きにカクツキがあるのとレンダリングを妨げるリソースが 36.9 KB もあり、悩まされました。

追記 2023/05/12

Easy Fancy Box はスマホ表示の場合、拡大した画像を閉じるとページトップに戻ってしまう不具合があったため、現在は FancyBox for WordPress を使用しています。画像にメディアを指定するなど使い方は同じなので、プラグインを入れ替えるだけで移行可能です。

なぜ使えなかったのか?

なぜ使えなかったのか?

原因は2つで、

  1. 画像に メディアファイル を指定できなかった。
  2. プラグイン Async JavaScript が競合していた。

…からでした!

なかなか気づかなかったのは、

  • メディアファイル指定よりも前にプラグインを無効にして確認。状況変わらずで、プラグインは原因ではないと判断してしまった。
  • Web情報にあるメディアファイルの指定方法が自分の環境ではできなかった。

クラシックエディタで メディアファイル の指定ができることが分かり、画像の拡大表示はできたのに Easy Fancy Box が使えなかったので、再度他のプラグインを全部無効にしてみたら Easy Fancy Box が効いたんですよ!

プラグインをひとつひとつ無効にして確認したところ、競合していたのは、Async JavaScript というものでした。

JavaScriptの読み込みを非同期・遅延させることでサイトの高速化をするプラグインです。他にも同様なプラグインがあるので、今後はそちらを使おうと思います。

Easy Fancy Box を設定してみよう

それでは、使い方が分かったのでやってみます。Easy Fancy Box のインストールは済んでいる前提です。

画像を挿入します。

Easy Fancy Box を設定

画像をいずれかの方法で取り込みます。

画像をいずれかの方法で取り込み

画像が貼られました

画像が貼られました

リンクを挿入 をクリックします。

リンクを挿入 をクリック

メディアファイルを選択します

メディアファイルを選択

これだけでOK。プレビューの 新しいタブでプレビュー で見てみましょう。

おっ画像の上にカーソルを重ねるとオンマウス状態になるぞ!?

画像の上にカーソルを重ねるとオンマウス状態に

画像がEasy Fancy Boxで開いたー!

画像がEasy Fancy Boxで開いた

うまいこと行きました! あとは、Easy Fancy Boxの設定を詰めて運用していきます!

ちなみに、この記事中の画像はすべてEacy fancy Boxで拡大表示することができます。

さくらD
さくらD

それではまた!さくらデトロイトでした!

-Web制作
-, , , , , , , ,