1. 第28回 【WordPress】 プラグイン Easy FancyBox メディアを拡大して見やすくできます
環境：Debian 9 PHP 7.4 Apache 2.4.25 MySQL 8.0 Cocoon
目的：メディアを拡大して見やすくする。
「tokyo2020unofficial.com」で利用しています。できれば「投票2020」でも利用したいのですが、同一の設定をしても、同一の動作をしてくれません。「投票2020」においては「ApacheからOpenLiteSpeed」へ移行したことによるものかもしれません。他には心当たりがありませんが、何が原因なのか分かりません。ですので「投票2020」では利用していません。
「tokyo2020unofficial.com」で利用している理由は、「メディアをクリックした時」の動作です。
- 画像をクリックすると、ビヨーンと拡大する。
- 拡大された画像をクリックすると、ビヨーンと縮小して元に戻る。
ここが最大のポイントで、画像をクリックすると縮小する点です。
他のツールでは、「画像以外の場所」をクリックしないと閉じないんですよね。
- PDFファイルを左クリックした時、同一ページで開いてくれる。
この3つが大きな理由ですが、言葉ではあまり良く伝わらないのではないかと思いますので、具体的にはこちらを見てみてください。「tokyo2020unofficial.com」内のページです。
- 画像拡大：
「例、東北地方：https://www.tokyo2020unofficial.com/ja/00-japan/02-07-tohoku-region/」
- PDF同一ページ拡大：
「例、日本酒：https://www.tokyo2020unofficial.com/ja/00-japan/0003-japanese-sake-nihonshu/」
- WordPressEasy FancyBox
インストール、有効化。
- WordPressメディア設定
1.1 「Easy FancyBox」インストール
- 「WordPress管理画面」「プラグイン」「新規追加」の順番でクリックします。
- 「今すぐインストール」をクリックして、次へ進みます。
1.2 「Easy FancyBox」有効化
- 「有効化」をクリックして次へ進みます。
1.3 設定画面へ
- 「WordPress管理画面」「設定」「メディア」の順番にクリックして次へ進みます。
1.4 メディアの選択
- どのメディアを「FancyBox」で表示させたいか、という選択です。
下記画面は初期設定画面です。次へ進みます。
1.5 ほとんどの人の設定
- 「初期設定の画像」以外に、選択するとした場合の選択です。
- 「PDF」「YouTube」は必須として、「Vimeo」を選択するかどうか迷うところだと思いますが、これから伸びそうなサービスですので選択して、次へ進みます。
1.6 「ウィンドウ」の設定
- メディアを拡大表示させた時の設定です。
- 「閉じるボタンを表示」しておいた方が良いです。
- 「マージン」この数値は動作確認しながら変更して、好きな数値で設定するのが良いと思います。
- 次へ進みます。
1.7 「その他」の設定
- 初期設定で問題ないかと思います。次へ進みます。
1.8 「画像」の設定
- 下記画面が「初期設定値」です。
- 次へ進みます。
1.9 「WebP」ファイル
- 「WebPファイル」の配信ができるように設定している場合には「.webp」を追記します。
- 特にこだわりがなければ、このまま次へ進みます。
1.10 「gif」ファイル
- 下記画面
「あ、gifファイルの追記忘れてた」です。
- ただ、それだけですので、次へ進みます。
1.11 「PDF」ファイル
- 「タイトルを表示・・・」をチェックしておいた方が良いと思います。
- 「PDFファイル」が同一画面上に表示されます。「その時にファイル名を表示するかどうか」という設定です。
- 次へ進みます。
1.12 「YouTube」の初期設定
- YouTube動画は「埋め込む方法」と「リンクのみの方法」との2つあります。
- 「埋込」と「リンク」の違い。
まず「埋込」
- 下記画面が初期設定です。
- リンクのみ（YouTube）：
- 「例、https://www.youtube.com/watch?v=12MqZrwilug」
左クリックのみで同一画面で見ることができます。
- モバイル端末だけを対象にしているのであれば、このプラグインも導入する必要がないし、この設定をする必要もありませんが、パソコンでも見てもらおうと思う人ならば、この設定の変更をオススメします。
1.13 「YouTube」の設定変更
- 上記の「680×360」から「1280×720」と変更しています。
- 「タイトルを表示・・・」にチェックしています。
1.14 「Vimeo」の初期設定
- 下記画面が「Vimeo」の初期設定です。「Vimeo」は高画質で・・・ということですから大きな画面で見ることが前提です。
- 設定変更をするので、次へ進みます。
1.15 「Vimeo」の設定変更
- YouTubeと同様に「680×360」から「1280×720」と変更しています。
- YouTubeと同様に「タイトルを表示・・・」にチェックしています。
- 変更を保存します。
1.16 さいごに
- 画像がびよ～んと表示されているか。
- PDFファイルが同一ページで表示されているか。
- YouTubeが同一ページで表示されているか。
- Vimeoが同一ページで表示されているか。
この4つが確認できて、綺麗に表示され、閉じることもスムーズにできる様になったのであれば、このプラグインは優秀です。「2つのサイト」で確認をしていますが、片方でしか確認ができていません。
ということは、「投票2020」では利用していないので優秀ではないかも知れません。うまくいかなかったらすまぬ。
【コメント】 ※「メールアドレス不要」