WordPressで画像を見やすくする【Lightbox効果】

WordPressで画像を見やすくする【Lightbox効果】 WordPress

こんにちは、mickです。

画像を印象的に見せる方法を知りたい
画像をクリックしたときに拡大したい
ページ移動しないで画像を大きくする

こんな要望に応えます。

画像だけ拡大するLightbox視覚効果

Lightbox効果で画面が前にでて他が暗くなる
Lightbox効果で画面が前にでて他が暗くなる

「Lightbox」という視覚効果(機能)を使えば同じ画面のうえに印象づけたい画像を上に重ねて表示できるようになります。

具体的な方法:Responsive Lightbox & Gallery プラグインを使う

Responsive Lightbox & Gallery
The most popular lightbox plugin and responsive gallery builder for WordPress.

インストールするだけで、過去の記事も自動的にLightbox効果を付けてくれるプラグイン「Responsive Lightbox & Gallery」を使います。

  • 口コミの評価が高い
  • 20万以上ダウンロード実績
  • WordPress最新版(5.6)の動作確認がある
  • 使い方が簡単

というのが紹介の理由。

Responsive Lightbox & Gallery の使い方

さっそくWordPressプラグイン「Responsive Lightbox & Gallery」を使っていきます。

プラグインのインストールと有効化

WordPressでプラグインを使うために最初はインストールと有効化が必要。

「プラグイン」>「新規追加」>「検索:Responsive Lightbox & Gallery」

Responsive Lightbox & Gallery をインストールする
Responsive Lightbox & Gallery をインストールする
Responsive Lightbox & Gallery を有効化する
Responsive Lightbox & Gallery を有効化する

一般設定のLightboxの表示効果を選ぶ

WordPressのメニューにプラグインのメニュー「Lightbox」ができてます。

「Lightbox」>「一般」

ここにある「デフォルト Lightbox」に「prettyPhoto」を選択。

Lightboxを prettyPhoto に設定しておく
Lightboxを prettyPhoto に設定しておく

これだけ。シンプル。

画像はメディアライブラリにリンクしてある必要がある

画像にLightboxの効果を出すには、画像をあらかじめメディアライブラリにリンクしてある必要があります。
Lightboxの設定をしていない場合は、リンク先に移動してしまう状態です。

そのやり方も載せておきます。

環境:WordPress5.5.3
エディタ:ブロックエディタ

画像を埋め込む

まずは記事に画像を埋め込みます。

記事に画像を埋め込む
記事に画像を埋め込む
メディアライブラリにリンクする

次に画像のリンク先にメディアライブラリを選びます。

画像をメディアライブラリにリンクする
画像をメディアライブラリにリンクする

これだけ。
あとは記事で画像をクリックすれば、Lightboxの効果を確認できます。

番外編:無料テーマCocoonのLightbox効果

WordPress無料テーマのCocoonを使っているなら、プラグイン不要
標準でLightbox効果の機能が付いてます。

「Cocoon設定」>「画像」

ここにある「画像の拡大効果」。
リストから「Lightbox」を選ぶだけでOK。

無料テーマCocoonは標準でLightboxを設定できる
無料テーマCocoonは標準でLightboxを設定できる

すごいぞ、Cocoon。

⇒ WordPress無料テーマのCocoon

まとめ。

WordPressで画像を見やすくする方法のひとつLightboxをプラグインで実装する方法を紹介しました。

Lightboxを使うと、画像をより効果的にユーザーに見せることが可能。
リンク先はメディアライブラリなので、画質もいいままにできます。
記事に載せる画像はファイルサイズを小さくできて、Webサイトの高速化にも貢献できる。

最後にプラグインを使ったLightbox効果の使い方をまとめます。

  1. Responsive Lightbox & Gallery をインストールして有効化する
  2. 一般設定のデフォルトlightboxに prettyPhoto を選ぶ
  3. 画像をメディアライブラリにリンクしておく

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/12

タイトルとURLをコピーしました