Wordpress

スマホでのピンチアウトにも対応するLightBox系プラグイン「Lightbox with PhotoSwipe」が良い!設定も解説。

モバイルファーストの時代。サイトのアクセスの半分以上がモバイル端末だったりしちゃう今日この頃。
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の使い方1

サイドメニューのプラグイン>新規追加>プラグインの検索窓に「Lightbox with PhotoSwipe」と入力。

今すぐインストールを押して有効化しましょう。

Lightbox with PhotoSwipeの設定方法

インストールが完了し、有効化されているとサイドメニューの設定の中に「Lightbox with PhotoSwipe」という項目があるのでココで詳細設定していきます。

・General
・Theme
・Captions
・Sharing
・Desktop
・Mobile
・Info
かなり設定できる項目があるので順番に見ていきます!
日本語化もできるようですが、一度設定してしまえばそんなに触らないので英語のまま設定します。
■ブラウザの日本語化機能を使えばうまく訳してくれます。

Lightbox with PhotoSwipe―General

ライトボックス表示時にどのような動作をさせるか、ボタンの表示、非表示の切り替えなどを設定する項目。
Lightbox with PhotoSwipeの使い方2Excluded pages/posts:このライトボックスプラグインを使用しないページを指定する。(触らなくてOK)

Excluded post types:このライトボックスプラグインを使用しない投稿タイプを指定する。(触らなくてOK)

Visible elements:ライトボックスメニューの設定
Show picture counter:画像表示時に上部に(1/30)というカウンターを表示する。30枚の内1枚目という感じ。
Show fullscreen button:Youtubeにあるような全画面表示ボタンをメニューに表示する。
Show zoom button if available:可能な場合は+ボタンのようなズームボタンを表示する。
Other options:その他のオプション
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)
無限ループはOFFにしといたほうが無難?あとは好みで設定

Lightbox with PhotoSwipe―Theme

画像表示時のデザインや余白などを調整する項目。デフォルトでも十分見やすいので変更する必要なし。
Lightbox with PhotoSwipeの使い方3

Lightbox with PhotoSwipe―Captions

キャプション(画像のalt属性など)や画像のEXIF情報を表示するかどうかの設定。

ほとんどのサイトでこれらの情報はあえて表示する必要はないかと。キャプションは補助的な情報だし、EXIFは写真家でもない限りほとんど必要ない情報。
それどころかサーバーに負荷がかかる可能性があるのですべてチェックを外しておきましょう。
Lightbox with PhotoSwipeの使い方4

Lightbox with PhotoSwipe―Sharing

画像を表示したライトボックスページにSNSへのシェアボタンや、画像のダウンロードボタンを表示するかどうかの設定。
Lightbox with PhotoSwipeの使い方5

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:カスタムリンク(良く分からない...)
スマホに対応していてかつ見やすい画像の表示だけがこのプラグインを導入した目的だったので、チェックは全て外しました。必要な方は設置したいボタンのみチェックを入れましょう。

Lightbox with PhotoSwipe―Desktop

PCで画像を開いた時の動作を設定する項目。
Lightbox with PhotoSwipeの使い方6

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でしょう。後は好みで触って下さい。

Lightbox with PhotoSwipe―Mobile

Lightbox with PhotoSwipeの使い方7

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つ目のピンチを有効にする項目は非常に重要です。(このためにこのプラグインにしたようなものw)

Lightbox with PhotoSwipe―Info

プラグインのバージョンや簡単な使い方など。設定する項目はありません。

こちらにも書いているとおり、画像のリンク先はメディアファイルに設定することをお忘れなく!

まとめ

WordPressの画像表示、拡大、シェア機能はこのプラグインに任せておけば問題なし?環境的に動作するのであれば是非とも入れておきたい超便利プラグインの「Lightbox with PhotoSwipe」のご紹介でした。

残念ながら当サイト、ソロ学が使用している有料テーマ「AFFINGER5」ではどうもうまく動かないので別のプラグインで同じようなものを実装しましたが、このプラグインの機能や使いやすさには到底かないませんでした…別ブログの無料テーマCocoonでは問題なく動作しているのでなんだか悔しい(笑)

■当サイトでは動作の近い?↓のプラグインを導入しました。

-Wordpress
-

© 2020 ソロ学