スマートフォンが普及して一気にモバイルファーストの時代となりました。
パソコン表示はもちろん、タブレットやスマートフォンでもバッチリと画像表示する必要があります。
そこでWordpressに導入できるライトボックス系の画像表示プラグイン「Lightbox with PhotoSwipe」をおすすめします！
ココがおすすめ
- PCはもちろん、タブレット、モバイルも完全対応。
- スマホの画像拡大機能（ピンチアウト）に対応。
- 埋め込んだ画像をページ内で表示できる（Light box）。
- 画像を連続でスワイプ表示（PCでは←→キー）が可能。
- 代表的なSNSへのシェア機能搭載。必要なければ隠すことも可能。
ただ使用しているテーマやプラグインと干渉し、うまく動かないことも...
ライトボックスプラグインあるあるですが…この問題だけ起きなければこれ一択なくらいの使いやすさです。
参考
テーマCocoonではうまく動作しましたが、テーマAFFINGER5ではスマホの画像拡大時に画像が左にズレてしまってうまくいきませんでした。
この記事の目次
Lightbox with PhotoSwipeの使い方と動作
Lightbox with PhotoSwipeの特徴は以下です。
- ページ内の画像をクリックするとライトボックスで画像が表示される。
- 開いた画像が十分に大きければマウスが虫眼鏡マークになる。
- クリックした部分を拡大表示する。
- 画像をライトボックスで開いてからスマホでのピンチアウト、ピンチインでの拡大縮小も可能！
おまけに画像以外の外枠をクリックしたり、マウスホイールすれば勝手に画像が閉じる完璧さです！
画像カウンターを表示したり、FacebookやTwitterなどのSNSへのシェアボタンも完備。一つ一つメニューに何を表示するかがプラグインの設定で選べるという凄さ。
これだけ完璧なライトボックスプラグインなのにインストール数は9000＋...
やはり使用しているテーマやプラグインによって完全にマッチする環境は限られているようなのが非常に残念です。
ポイント
このプラグインを使いたい人は一度インストールしてみて問題なく動くか、まず初めに確認したほうが良さそうです。
プラグインのインストール
2020年7月15日時点でWordpressのプラグインとして公開されているので、そのままダッシュボードからインストールできました。
管理画面左メニュー＞プラグイン＞新規追加
に進み、プラグインの検索窓に「Lightbox with PhotoSwipe」と入力します。
プラグインが出てきたら、今すぐインストールを押して有効化しましょう。
なおプラグインの公式ページは以下です。
外部リンク
【Lightbox with PhotoSwipe】
Lightbox with PhotoSwipe – WordPress plugin | WordPress.org
Lightbox with PhotoSwipeの設定
インストールが完了し、有効化されているとサイドメニューの設定の中に「Lightbox with PhotoSwipe」という項目があるのでココで詳細設定していきます。
Lightbox with PhotoSwipeで設定できる項目は以下です。
- General
- Theme
- Captions
- Sharing
- Desktop
- Mobile
- Info
かなり設定できる項目があるので順番に見ていきます！
追記
日本語化もできるようですが、一度設定してしまえば以後は触らないので英語のまま設定します。
英語が苦手な方はブラウザの日本語化機能を使えばうまく訳してくれます。
General
ライトボックス表示時にどのような動作をさせるか、ボタンの表示、非表示の切り替えなどを設定する項目です。
Excluded pages/posts：このプラグインを使用しないページを指定する。
Excluded post types：このプラグインを使用しない投稿タイプを指定する。
Visible elements：ライトボックスメニューの設定
Show fullscreen button：Youtubeにあるような全画面表示ボタンをメニューに表示する。
Show zoom button if available：可能な場合は＋ボタンのようなズームボタンを表示する。
Other options：その他のオプション
Allow infinite loop：無限ループを許可。（最後の画像→最初の画像という感じにループする）
Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes：WordpressギャラリーとGutenbergギャラリーブロックを別々のライトボックスに表示する。（触らなくてOK）
Add native lazy loading to images：画像にネイティブ遅延読み込みを追加する。（別のプラグインに頼るのでOFF）
無限ループはOFFにしといたほうが無難？あとの設定は正直好みの問題です。
Theme
画像表示時のデザインや余白などを調整する設定項目です。
デフォルトでも十分見やすいので変更する必要はないです。
Captions
画像のキャプションや画像のEXIF情報を表示するかどうかの設定です。
EXIFは写真家でもない限りほとんど必要ない情報ですが、キャプションはサイトによっては表示した方がユーザービリティーが向上します。
サーバーに負荷がかかる可能性があるとのことですので、不要な方はチェックを外しておきましょう。
Sharing
画像を表示したライトボックスページにSNSへのシェアボタンや、画像のダウンロードボタンを表示するかどうかの設定です。
Visible sharing options：共有ボタンの表示の設定
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：カスタムリンク（すみません良く分かりません…）
参考
スマホに対応していてかつ見やすい画像の表示だけがこのプラグインを導入した目的だったので、チェックは全て外しました。必要な方は設置したいボタンのみチェックを入れましょう。
Desktop
PCで画像を開いた時の動作を設定する項目です。
General：PCでのライトボックスの設定
Full picture size in desktop view：パソコンで画像をフルサイズで表示する。
Use slide animation when switching images in desktop view：パソコンで画像を切り替える時にスライドアニメーションを使用する。（結構自然な感じ）
Close the lightbox by clicking outside the image：画像の外側をクリックしてライトボックスを閉じる。
Mouse wheel function：マウスホイールした時どうするか
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秒で画面端にあるメニューが消え、画像のみが表示されます。
ポイント
基本的に初期設定が一番使いやすく、見やすいのでそのままでOKでしょう。後は好みで触って下さい。
Mobile
スマートフォンで画像を開いた時の動作を設定する項目です。
General：モバイル（スマホ）でのライトボックスの設定
Close with vertical drag in mobile view：垂直ドラッグ（縦フリック）で画像を閉じる。
Enable pinch to close gesture on mobile devices：ピンチを有効にしてジェスチャーを閉じる。
Enable tap to toggle controls on mobile devices：タップを有効にして、モバイルのコントロールを切り替える。
タップを有効化すると意図しない挙動が起きそうなため、一番下のEnable tap to toggle controls on mobile devicesの項目のチェックは外しました。
2つ目のピンチを有効にする項目は非常に重要です。
（このためにこのプラグインにしたようなものなので！）
Lightbox with PhotoSwipe―Info
プラグインのバージョンや簡単な使い方など。設定する項目はありません。
ポイント
こちらにも書いているとおり、画像のリンク先はメディアファイルに設定することをお忘れなく！
まとめ
Wordpressの画像表示、拡大、シェア機能はこのプラグインに任せておけば問題なし？環境的に動作するのであれば是非とも入れておきたい超便利プラグインの「Lightbox with PhotoSwipe」のご紹介でした。
残念ながら当サイトが使用している有料テーマ「AFFINGER5」ではどうもうまく動かないので別のプラグインで同じようなものを実装しましたが、このプラグインの機能や使いやすさには到底かないませんでした…別ブログの無料テーマCocoonでは問題なく動作しているのでなんだか悔しいです（笑）
■当サイトでは動作の近い？↓のプラグインを導入しました。
関連記事
