Wordpress

シンプルで軽量、スマホにも対応した画像表示プラグイン「Simple Lightbox」が「EasyFancyBox」よりも見やすそう。

WordPress内の画像をクリックするとぽよーんとポップアップみたいな感じに表示してくれるプラグインって星の数ほどあるけれど、スマホで見たときにイマイチ見にくいのが多い。
巷では「EasyFancyBox」というプラグインが大人気のようだけど、スマホでピンチアウトして拡大したいときになんだか不親切な感じ...
PCでの表示もスマホでの表示もシンプルだけど上手く表示してくれるライトボックスプラグインを当サイトに導入したのでご紹介。
スマホで画像を開いた時に、指で拡大ズームできるシンプルな画像表示プラグインです。

本当は「Lightbox with PhotoSwipe」を採用したかったけど、当サイト使用中の有料テーマAFFINGER5との相性が悪くうまく動かなかったので、妥協してこちらにしました。
参考ページ内記事:スマホでのピンチアウトにも対応するLightBox系プラグイン「Lightbox with PhotoSwipe」が良い!設定も解説。

ライトボックスプラグイン―Simple Lightbox

ココがおすすめ

■軽量かつシンプルで見やすいライトボックスを簡単導入
■スマホでズーム(ピンチアウトで拡大)できる
■PCでも画像をクリックすればフルサイズで画像を表示してくれる。

Simple Lightboxでライトボックス表示した時【PC】

画像(左):ライトボックスプラグイン無し、新規ページで開くオプションあり。
画像(右):ライトボックスプラグインあり。

画像で比較しても分かりにくいですが、記事内の画像をクリックした時に、ページ内で全画面表示ができるようになります。シンプルでGOOD!

Simple Lightboxでライトボックス表示した時【モバイル】

画像(左):ライトボックスプラグイン無し、新規ページで開くオプションあり。
画像(右):ライトボックスプラグインあり。

IOSで実際に画像をクリックした画面。こちらもページ遷移することなく画像を表示。

Simple Lightbox5
ちなみに指でぎゅーっとピンチアウトするとこのまま拡大できます。

Simple Lightboxのインストール

2020年7月15日時点で公開されているプラグインなので、プラグイン>新規追加>「Simple Lightbox」と検索すれば出てきます。
今すぐインストールして有効化をクリック。

Simple Lightbox6

Simple Lightboxの設定(任意)

そのままでも有効化した時点でライトボックス表示はできるようになっていると思います。
※画像のリンク先をメディアファイルにしないと動作しません。

設定画面はWordpressのサイドメニュー、外観>LightBox またはインストール済みプラグイン>Simple Lightboxの下にある設定より。
Simple Lightbox7日本語なので読んで字の如くです。設定は簡単!基本的にデフォルトでOKかと。

【補足】
Lightbox機能を有効にする:プラグインのON,OFF。有効にしないと意味がありません...
ホームページで有効にする:サイトのトップページで有効にするか

Simple Lightbox8

【補足】
テーマ:画像の後ろの影の部分がライトとダークの2種類から選べます。
画像をシンプルに表示したいだけなので、今回はアニメーション、スライドショー、項目のループを無効にしました。

Simple Lightbox9

【補足】
ラベルの文字を変更できるようです。とはいってもこの文字がそのまま表示されるわけではなく、アイコンとして表示されるものばかりなのでそのままでOKでしょう。

以上でSimple Lightboxプラグインの導入、設定は終了です。最後に実装できたかPC、モバイルで確認しておきましょう・w・

ザキのわがままカスタマイズ編

スマホで画像をライトボックス表示するときは、画面上部に画像が表示されるのが仕様のようです↓
Simple Lightbox4
パソコンみたいに画面のど真ん中に表示したかったので、少しカスタムします。

子テーマのstyle.cssを編集して以下のコードを追加。

/*ライトボックスの画像表示をスマホで中央寄せ*/
@media only screen and (max-width: 480px) {
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
transform: translateX(50vw) translateX(-50%);
transform: translateY(50vh) translateY(-50%);
}
}

このプラグインで追加されているであろうIDとClassに480px(スマホ)以下という条件付きで、cssにて上下左右のスペースを計算しなおして無理やり中央にもってきてます。Simple Lightbox10
↑意図した結果になりました。

しかし、なぜかISOの実機のsafariだけまだ画面上部に表示されちゃうままです・・・気になる人はやめといて下さいww

まとめ

動作も設定の細かさ的にも本当は「Lightbox with PhotoSwipe」を使いたかったのですが、有料テーマAFFINGER5では画像を拡大したときにズレちゃってうまくいきませんでした。
大人気プラグインの「EasyFancyBox」よりもシンプルかつスマホのピンチ対応ということでソロ学では当分このプラグインに頼りたいと思います。

-Wordpress
-,

© 2020 ソロ学