PCはもちろん、タブレットやスマートフォンでもバッチリと画像を表示しなければ...
そこで簡単に導入できるライトボックス系の画像プラグイン「Lightbox with PhotoSwipe」をおススメしたい。
ココがおすすめ
■PCはもちろん、タブレット、モバイルも完全対応。
■スマホの画像拡大機能(ピンチアウト)に対応
■埋め込んだ画像をページ内で表示できる(Light box)
■画像を連続でスワイプ表示(PCでは←→キー)が可能
■代表的なSNSへのシェア機能搭載。必要なければ隠すことも可能。
■無料テーマCocoonではうまく動作しました。
■有料テーマAFFINGER5では画像拡大時に画像が左にズレてしまってうまくいきませんでした。
代替え案→シンプルで軽量、スマホにも対応した画像表示プラグイン「Simple Lightbox」が「EasyFancyBox」よりも見やすそう。
Lightbox with PhotoSwipeの動作と使い方
画像(左)：ページ内の画像をクリックするとライトボックスで画像が表示される
画像(中)：開いた画像が十分に大きければマウスが虫眼鏡マークになる
画像(右)：クリックした部分を拡大表示する。
スマホでのピンチアウト、ピンチインでの拡大縮小もこんな感じで実現！
おまけに画像以外の外枠をクリックしたり、マウスホイールすれば勝手に画像が閉じる完璧さ...
画像には表示されていないが、画像カウンターを表示したり、FacebookやTwitterなどのSNSへのシェアボタンも完備。一つ一つメニューに何を表示するかがプラグインの設定で選べるという凄さ。
これだけ完璧なライトボックスプラグインなのにインストール数は9000＋...やはり使用しているテーマやプラグインによって完全にマッチする環境は限られているようなのが非常に残念。
Lightbox with PhotoSwipeのインストール
2020年7月15日時点でWordpressのプラグインとして公開されているので、そのままダッシュボードからインストールできるようです。
サイドメニューのプラグイン＞新規追加＞プラグインの検索窓に「Lightbox with PhotoSwipe」と入力。
今すぐインストールを押して有効化しましょう。
Lightbox with PhotoSwipeの設定方法
インストールが完了し、有効化されているとサイドメニューの設定の中に「Lightbox with PhotoSwipe」という項目があるのでココで詳細設定していきます。
・Theme
・Captions
・Sharing
・Desktop
・Mobile
・Info
かなり設定できる項目があるので順番に見ていきます！
■ブラウザの日本語化機能を使えばうまく訳してくれます。
Lightbox with PhotoSwipe―General
ライトボックス表示時にどのような動作をさせるか、ボタンの表示、非表示の切り替えなどを設定する項目。
Excluded pages/posts：このライトボックスプラグインを使用しないページを指定する。(触らなくてOK)
Excluded post types：このライトボックスプラグインを使用しない投稿タイプを指定する。(触らなくてOK)
Show picture counter：画像表示時に上部に(1/30)というカウンターを表示する。30枚の内1枚目という感じ。
Show fullscreen button：Youtubeにあるような全画面表示ボタンをメニューに表示する。
Show zoom button if available：可能な場合は＋ボタンのようなズームボタンを表示する。
Update browser history (going back in the browser will first close the lightbox)：ブラウザーの履歴を更新する。(チェックしたままでOK)
Allow infinite loop：無限ループを許可(最後の画像→最初の画像という感じにループする)
Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes：WordPressギャラリーとGutenbergギャラリーブロックを別々のライトボックスに表示する(触らなくてOK)
Add native lazy loading to images：画像にネイティブ遅延読み込みを追加する(別のプラグインに頼るのでOFF)
Lightbox with PhotoSwipe―Theme
画像表示時のデザインや余白などを調整する項目。デフォルトでも十分見やすいので変更する必要なし。
Lightbox with PhotoSwipe―Captions
キャプション(画像のalt属性など)や画像のEXIF情報を表示するかどうかの設定。
ほとんどのサイトでこれらの情報はあえて表示する必要はないかと。キャプションは補助的な情報だし、EXIFは写真家でもない限りほとんど必要ない情報。
それどころかサーバーに負荷がかかる可能性があるのですべてチェックを外しておきましょう。
Lightbox with PhotoSwipe―Sharing
画像を表示したライトボックスページにSNSへのシェアボタンや、画像のダウンロードボタンを表示するかどうかの設定。
Share on Facebook：Facebookでシェアするボタンを表示するかどうか。
Tweet：つぶやきボタンを表示するかどうか。
Use URL of images instead of lightbox on Facebook and Twitter：FacebookとTwitterでライトボックスの代わりに画像のURLを使用する？
Pin it：ピンタレストのピン止めボタンを追加するかどうか。
Download image：画像をダウンロードするボタンを表示するかどうか。
Copy image URL：画像のURLをコピーするボタンを表示するかどうか。
Custom link：カスタムリンク(良く分からない...)
Lightbox with PhotoSwipe―Desktop
PCで画像を開いた時の動作を設定する項目。
Full picture size in desktop view：パソコンで画像をフルサイズで表示する
Use slide animation when switching images in desktop view：パソコンで画像を切り替えると気にスライドアニメーションを使用する(結構自然な感じ。)
Close the lightbox by clicking outside the image：画像の外側をクリックしてライトボックスを閉じる。
Scroll zoomed image otherwise do nothing：スクロールしても何もしない
Scroll zoomed image or close lightbox if not zoomed：スクロールしたら画像を閉じる
Zoom in/out：マウスホイールで画像をズーム/ズームアウトする
Switch to next/previous picture：マウスホイールで次/前の画像に切り替え
Idle time for controls：画像表示時のメニューが消えるまでの時間、デフォルトでは4秒で画面端にあるメニューが消え、画像のみが表示されます。
Lightbox with PhotoSwipe―Mobile
Close with vertical drag in mobile view：垂直ドラッグ(縦フリック)で画像を閉じる。
Enable pinch to close gesture on mobile devices：ピンチを有効にしてジェスチャーを閉じる。
Enable tap to toggle controls on mobile devices：タップを有効にして、モバイルのコントロールを切り替える。
2つ目のピンチを有効にする項目は非常に重要です。(このためにこのプラグインにしたようなものｗ)
Lightbox with PhotoSwipe―Info
プラグインのバージョンや簡単な使い方など。設定する項目はありません。
まとめ
WordPressの画像表示、拡大、シェア機能はこのプラグインに任せておけば問題なし？環境的に動作するのであれば是非とも入れておきたい超便利プラグインの「Lightbox with PhotoSwipe」のご紹介でした。
残念ながら当サイト、ソロ学が使用している有料テーマ「AFFINGER5」ではどうもうまく動かないので別のプラグインで同じようなものを実装しましたが、このプラグインの機能や使いやすさには到底かないませんでした…別ブログの無料テーマCocoonでは問題なく動作しているのでなんだか悔しい（笑）
■当サイトでは動作の近い？↓のプラグインを導入しました。 WordPress内の画像をクリックするとぽよーんとポップアップみたいな感じに表示してくれるプラグインって星の数ほどあるけれど、スマホで見たときにイマイチ見にくいのが多い。 巷では「EasyFancy ... 続きを見る
シンプルで軽量、スマホにも対応した画像表示プラグイン「Simple Lightbox」が「EasyFancyBox」よりも見やすそう。