WordPressで画像をクリックしたとき自動的にサイズ調整してポップアップさせる方法

画像をクリックしたときに、きれいに画像がポップアップして画面に表示されるページがあると思います。

WordPressでブログなどを運用していると、やはり挿入した画像はきれいに見せたいもの。

それなのに。

画像をクリックしたときに、別のタブが開いてしまう・・・

ポップアップはするんだけど、そのサイズが安定しなくて画面のサイズ以上に広がってしまう・・・

いちいち画像のサイズを小さくしてアップロードするのはめんどくさい・・・

今回はそんなお悩みに対するTIPSです。

Lightboxの仕組みを利用する

Lightboxとは、ウェブサイト上で画像のサムネイルをクリックしたときに、サイト上にポップアップで浮かんでくる機能の事です。

Javascript、CSSを利用しています。

複数の画像をグループ化して、スライドギャラリーのように見せることも可能です。

最近では結構見かけることも多くなった、このLightbox。Wordpressならプラグインでサクッと導入できるためおすすめです。

一方、パソコンでは非常に見やすいLightboxですが、スマホの場合あまり表示サイズが変わらない割に操作性を侵害することがあるので、スマホサイトに導入する場合は要注意です。

画像を多く見せたいギャラリーページや、商品の詳細を見せるページなど目的を絞って導入するのが良いでしょう。

現在お使いのテーマがLightbox標準対応か調べる

Lightbox系のプラグインは複数インストールするとお互いが干渉しあい、変な表示になることがあります。

市販されているテーマや、高機能テーマをお使いで、初期状態でLightboxが使われている場合は、新しくLightboxプラグインを入れることで変になってしまうことがあります。

今お使いのテーマにLightboxが使われていないかどうか、あらかじめご確認ください。

最初にすべき、「画像リンク」の設定

WordPressで画像をアップロードした際に指定する、「添付ファイルの表示設定」を忘れずに指定してください。

リンク先の部分を「メディアファイル」に指定すると、クリック時に画像ファイルが開くようになります。

この時に、Lightboxの設定をしていないと、直接タブが開き画像ファイルだけが表示されているページに飛びます。

WP jQuery Lightboxをインストールする

WordPressのプラグイン＞新規追加より、「WP jQuery Lightbox」をインストールしてください。

Lightbox系のプラグインは多数あるのですが、クリエイター以外の方であれば断然このプラグインをおすすめします。

その理由としては、

「大きい画像をアップロードしても、スクリーンサイズに自動リサイズする機能がある」

これに尽きます。

本来ブログに画像をアップロードするときは、表示の軽さを考慮してデジカメやスマホで撮影した写真サイズを横幅900px位に縮小して投稿します。

しかし、いちいちリサイズするのが面倒くさい！という人のほうが多いと思います。

実際、何十枚も1ページに画像をアップロードするならまだしも、1、2枚であればわざわざリサイズする必要もないかと思います。

しかし、多くのLightboxプラグインは、サムネイルクリック時に原寸のサイズの画像を表示させてしまいます。

例えば、デジカメで高画質な画像を撮影した場合、スクリーンを飛び出すくらいの画像が拡大表示されてしまいます。

これはめんどくさいですし、ユーザー的にも使いやすいとは言えません。

ですので、自動リサイズのあるこのプラグインならスマホでも安心。おすすめします。

インストールしたら設定をする

インストールしたら、メニューの「設定」＞「jQuery Lightbox」より初期設定を行います。

必ずチェックを入れるべきは、「スクリーンサイズに合わせて画像を縮小」のボックスです。ここには必ずチェックを入れましょう。

あとは基本的にそのままでいいのですが、「Show title」「Show caption」「Show image numbers」は気になるならチェックを外してください。

ここにチェックが入っている場合、画像が浮き出して表示される際にファイル名や画像の説明文などが出てきます。

以上で設定は完了！楽しいブログライフを！

以上ですべて終了です。

サムネイル画像はすべてポップアップ表示されるように変わったと思います。いやー、便利ですね。

画像がきれいで多いサイトは、見た目が良いだけでなくSNSでのシェア率にも大きく影響します。

ぜひ、Lightbox試してみてください。