シンプルで軽量、スマホ対応の画像表示プラグイン「Simple Lightbox」が「EasyFancyBox」より良い。

2020-07-15
Wordpress

Simple-Lightbox2

WordPressで画像をクリックするとライトボックスで表示してくれるプラグインは星の数ほどあるけれど、スマホで見たときにイマイチ見にくいのが多いです。

巷では「EasyFancyBox」というプラグインが大人気のようだけど、スマホでピンチアウトして拡大した時になんだか不親切な感じがします。

この度パソコンでもスマートフォンでもシンプルだけど上手く表示してくれるライトボックスプラグイン「Simple Lightbox」を当サイトに導入しました。

スマホで画像を開いた時に、指で拡大ズームできる画像表示プラグインです。

本当は「Lightbox with PhotoSwipe」を採用予定だったのですが、テーマAFFINGER5との相性が悪くうまく動かなかったので、妥協してこちらにしました。

Simple Lightboxの使い方

ライトボックス表示するというのは、記事内に埋め込まれている画像をクリックしたときに画面遷移することなく画面上に画像を表示する動作のことです。

意外と取り入れているところが少ないのですが、画面遷移することなく画像をフルサイズで表示できるのでユーザービリティが高まります。

Simple Lightboxは有効化するだけでこの機能を実装できるプラグインです。

ココがおすすめ

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

ライトボックス表示例【PC】

まずはどのような感じで表示されるのか気になると思うので動作例からどうぞ!

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

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

個人的にですが画像をクリックして画像だけの別タブが開くのは使いにくいです。
ライトボックス表示は画面遷移しないというのが一番のポイントです。

ライトボックス表示例【モバイル】

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

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

Simple-Lightbox5

スマホでの拡大例

指でぎゅーっとピンチアウトするとこのまま拡大できます。
このスマホでの拡大表示が出来ないライトボックスプラグインが多いのです。

プラグインのインストール

2020年7月15日時点で公開されているプラグインなので、

管理画面左メニュー > プラグイン > 新規追加

に進み検索欄に「Simple Lightbox」と入力すれば出てきます。

Simple Lightbox6

今すぐインストールして有効化をクリックしましょう!

なおプラグインの公式ページは以下です。

Simple Lightboxの設定

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

Simple Lightboxの設定は以下から設定できます。

管理画面左メニュー > 外観 > LightBox

またはインストール済みプラグインのSimple Lightbox下にある設定からでもOK!

Simple Lightbox7

Lightbox設定-有効化・グループ化

日本語なので読んで字の如くです。
設定は簡単!ですが、基本的にデフォルトでOKかと思います!

補足

  • Lightbox機能を有効にする:プラグインのON、OFFの設定。
  • ホームページで有効にする:トップページで有効にするかどうかの設定。

Lightbox機能は有効にしないと意味がありません。
サイトのトップページに拡大表示したい画像がある場合は「ホームページで有効にする」にチェックを入れましょう。(※要動作確認)

Simple Lightbox8

Lightbox設定-UI

補足

テーマ:画像の後ろの影の部分がライトとダークの2種類から選べます。

画像をシンプルに表示したいだけなので、今回はアニメーション、スライドショー、項目のループを無効にしました。

Simple Lightbox9

Lightbox設定-ラベル

補足

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

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

スマホで画像を中央に表示するCSS

最後に少しわがままカスタマイズしましたので書いておきます。

スマホでの表示時、画面上部に画像が表示されるのがプラグインの仕様のようです。
そのままでも閲覧には問題ないのですが、個人的に気になりましたので…

Simple-Lightbox4

プラグインON

パソコンみたいに画面のど真ん中に表示したかったので、少しカスタムします。

子テーマの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だけまだ画面上部に表示されちゃうままです…
後日確認したら中央に表示されていました。(iPhoneのキャッシュが原因でした。)

サイトに合うように適宜カスタマイズして使用していただければと思います。

まとめ

動作も設定の細かさ的にも本当は「Lightbox with PhotoSwipe」を使いたかったのですが、有料テーマAFFINGER5ではスマホで画像をピンチアウトで拡大したときにズレちゃってうまくいきませんでした。

大人気プラグインの「EasyFancyBox」よりもシンプルかつスマホのピンチ対応ということで、当サイトでは当分このプラグインに頼りたいと思います。
うちのサイトは横長の画像が多いのでスマホで見ると拡大しないと見にくいのですが、それはどのプラグインでも同じです。

動作は安定しており、不満な点は特にないのでお勧めのプラグインです。

-Wordpress
-,

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学