第28回 【WordPress】 プラグイン Easy FancyBox メディアを拡大して見やすくできます

WordPress GCP

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」内のページです。

  • WordPress
    Easy 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つあります。
  • 「埋込」と「リンク」の違い。
    まず「埋込」
「WordPress」のメディアファイルを「Google Cloud Storage」から配信させる方法の動画です。
  • 下記画面が初期設定です。
  • リンクのみ(YouTube):
  • モバイル端末だけを対象にしているのであれば、このプラグインも導入する必要がないし、この設定をする必要もありませんが、パソコンでも見てもらおうと思う人ならば、この設定の変更をオススメします。

1.13 「YouTube」の設定変更

  1. 上記の「680×360」から「1280×720」と変更しています。
  2. 「タイトルを表示・・・」にチェックしています。

1.14 「Vimeo」の初期設定

  • 下記画面が「Vimeo」の初期設定です。「Vimeo」は高画質で・・・ということですから大きな画面で見ることが前提です。
  • 設定変更をするので、次へ進みます。

1.15 「Vimeo」の設定変更

  1. YouTubeと同様に「680×360」から「1280×720」と変更しています。
  2. YouTubeと同様に「タイトルを表示・・・」にチェックしています。
  3. 変更を保存します。

1.16 さいごに

  1. 画像がびよ~んと表示されているか。
  2. PDFファイルが同一ページで表示されているか。
  3. YouTubeが同一ページで表示されているか。
  4. Vimeoが同一ページで表示されているか。

この4つが確認できて、綺麗に表示され、閉じることもスムーズにできる様になったのであれば、このプラグインは優秀です。「2つのサイト」で確認をしていますが、片方でしか確認ができていません。

ということは、「投票2020」では利用していないので優秀ではないかも知れません。うまくいかなかったらすまぬ。


次は、第29回です。


【コメント】 ※「メールアドレス不要」