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

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

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

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

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

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

問題なく使えるならLightbox with PhotoSwipeがオススメです！
スマホでのピンチアウトにも対応するLightBox系プラグイン「Lightbox with PhotoSwipe」が良い！設定も解説。

この記事の目次

Simple Lightboxの使い方

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

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

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

ココがおすすめ

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

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

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

: プラグインOFF

: プラグインON

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

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

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

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

: プラグインOFF

: プラグインON

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

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

スマホでの拡大例

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

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

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

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

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

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

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

外部リンク

【Simple Lightbox】
Simple Lightbox – WordPress プラグイン | WordPress.org 日本語

Simple Lightboxの設定

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

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

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

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

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

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

補足

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

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

Lightbox設定-UI

補足

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

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

Lightbox設定-ラベル

補足

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

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

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

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

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

プラグイン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にて上下左右のスペースを計算しなおして無理やり中央にもってきてます。