記事中の画像をホバーで拡大表示するライトボックスにする方法

WordPressの記事内にある画像を、クリックやホバーで拡大表示（ライトボックス）できるようにする方法をご紹介します。
プラグイン不要で、HTML・CSS・JavaScriptだけで実装可能です。

1 HTML構造

<img src="https://placehold.jp/400x250.png" alt="サンプル画像" class="lightbox-img hover-zoom">

2 function.phpにコードを追加

以下を functions.php に追記して、全ページにライトボックスを自動読み込みできます。

//-------------------------------------------
// ライトボックス用スクリプトを全ページに追加
//-------------------------------------------
add_action('wp_footer', function() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const overlay = document.createElement("div");
  overlay.id = "lightbox-overlay";
  const img = document.createElement("img");
  overlay.appendChild(img);
  document.body.appendChild(overlay);

  document.querySelectorAll(".lightbox-img").forEach(function(el) {
    el.addEventListener("click", function() {
      img.src = el.src;
      overlay.style.display = "flex";
      document.body.style.overflow = "hidden";
    });
  });

  overlay.addEventListener("click", function() {
    overlay.style.display = "none";
    document.body.style.overflow = "auto";
  });

  document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") {
      overlay.style.display = "none";
      document.body.style.overflow = "auto";
    }
  });
});
</script>
<style>
#lightbox-overlay {
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:9999;
}
#lightbox-overlay img {
  max-width:90%;max-height:90%;border-radius:10px;
  box-shadow:0 0 25px rgba(255,255,255,0.4);
  animation:zoomIn 0.35s ease;
}
@keyframes zoomIn {
  from {opacity:0;transform:scale(0.4);}
  to {opacity:1;transform:scale(1);}
}
</style>
<?php
});

3 汎用CSS

次のコードを「外観 → カスタマイズ → 追加CSS」または「子テーマのstyle.css」に追加します。

/* -----------------------------
 * ホバーで拡大表示
----------------------------- */

/* .hover-zoom クラス：ホバー時に画像や要素を拡大表示するための基本設定 */
.hover-zoom {
  cursor: zoom-in; /* マウスカーソルを「ズームイン」アイコンに変更 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* transform と box-shadow の変化を0.3秒で滑らかにアニメーション */
  border-radius: 8px; /* 角を丸くする */
}

/* ホバー時のスタイル */
.hover-zoom:hover {
  transform: scale(1.05); /* 1.05倍に拡大 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* 影を付けて浮き上がったように見せる */
}

/* ▼ライトボックス全体のオーバーレイ */
#lightbox-overlay {
  display: none; /* 初期状態は非表示 */
  position: fixed; /* 画面全体に固定 */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅100% */
  height: 100%; /* 高さ100% */
  background: rgba(0,0,0,0.8); /* 半透明の黒背景 */
  justify-content: center; /* 子要素を水平方向に中央配置（Flexbox） */
  align-items: center; /* 子要素を垂直方向に中央配置（Flexbox） */
  z-index: 9999; /* 他の要素より前面に表示 */
}

/* ▼ライトボックス内の画像 */
#lightbox-overlay img {
  max-width: 90%; /* 横幅最大90% */
  max-height: 90%; /* 高さ最大90% */
  border-radius: 10px; /* 角を丸くする */
  box-shadow: 0 0 25px rgba(255,255,255,0.4); /* 光のハイライト効果 */
  animation: zoomIn 0.35s ease; /* 表示時に zoomIn アニメーション */
  transform: scale(1.2); /* 初期拡大状態（アニメーション開始位置） */
}

/* ▼拡大表示のアニメーション定義 */
@keyframes zoomIn {
  from {
    opacity: 0; /* 開始時は透明 */
    transform: scale(0.4); /* 小さく表示 */
  }
  to {
    opacity: 1; /* 最終的に不透明 */
    transform: scale(1); /* 元の大きさに拡大 */
  }
}

/* ▼Lightningテーマ専用の調整 */
body.lightning .lightbox-img {
  border: 1px solid #eee; /* 薄い枠線を追加 */
}

/* ▼Cocoonテーマ専用の調整 */
body.cocoon .lightbox-img {
  display: block; /* ブロック表示に変更 */
  margin: 15px auto; /* 上下に15px、左右中央寄せ */
} /* ここで .lightbox-img のスタイル終了 */

4 JavaScriptにコードを追加

ファイル名：lightbox-overlay.js
保存先：wp-content/themes/child-theme/js/lightbox-overlay.js

//-------------------------------------------
// オーバーレイ要素を作成
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  // オーバーレイ作成
  const overlay = document.createElement("div");
  overlay.id = "lightbox-overlay";
  const img = document.createElement("img");
  overlay.appendChild(img);
  document.body.appendChild(overlay);

  // 各画像にクリックイベント
  document.querySelectorAll(".lightbox-img").forEach(function(el) {
    el.addEventListener("click", function() {
      img.src = el.src;
      overlay.style.display = "flex";
      document.body.style.overflow = "hidden"; // 背景スクロール停止
    });
  });

  // オーバーレイクリック or ESCキーで閉じる
  overlay.addEventListener("click", function() {
    overlay.style.display = "none";
    document.body.style.overflow = "auto";
  });

  document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") {
      overlay.style.display = "none";
      document.body.style.overflow = "auto";
    }
  });
});

4.1 ディレクトリ構造

5 完成イメージ

以下のように、画像にマウスを乗せると拡大、クリックすると画面中央に大きく表示されるライトボックスが開きます。

6 まとめ

• 画像に class="lightbox-img hover-zoom" を付ける
• CSSでホバー拡大＆ライトボックス表示を制御
• JavaScriptでクリック拡大 → オーバーレイ表示 → 閉じる

これで、WordPress記事中の画像を美しく拡大表示できるようになります！
プラグイン不要で、Cocoon・Lightning どちらでもOKです。