2026年1月の記事一覧

「ポップアップ（ライトボックス）」は、画像をクリックすると画面がふわっと暗くなり、その上に大きな画像が浮き出てくる演出です。

別ページを作らなくて済むので管理がとても楽ですし、ユーザーも「戻る」操作をせずに×ボタンや背景クリックで元に戻れるため、非常に使い勝手が良い方法です。

CMSの「HTML編集」にそのまま貼り付けられる、「外部ファイル不要・この1セットで完結」するコードを作成しました。

ポップアップ機能付き 2×2画像レイアウト
これをそのまま貼り付けて、画像URLを差し替えるだけで動きます。

HTML 
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL①" onclick="openLightbox('大きな画像のURL①')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文①（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL②" onclick="openLightbox('大きな画像のURL②')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文②（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL③" onclick="openLightbox('大きな画像のURL③')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文③（クリックで拡大）</p>
</div>

<div style="flex: 1 1 280px; max-width: 48%; min-width: 250px; text-align: center; cursor: pointer;">
<img src="小さな画像のURL④" onclick="openLightbox('大きな画像のURL④')" style="width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<p style="font-size: 14px; margin-top: 8px;">説明文④（クリックで拡大）</p>
</div>

</div>

<div id="lightboxOverlay" onclick="closeLightbox()" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; cursor: pointer;">
<div style="position: relative; max-width: 90%; max-height: 90%;">
<img id="lightboxImage" src="" style="width: 100%; height: auto; max-height: 90vh; border: 3px solid #fff; border-radius: 4px;">
<div style="position: absolute; top: -40px; right: 0; color: #fff; font-size: 30px; font-weight: bold;">&times;</div>
<div style="color: #fff; text-align: center; margin-top: 10px; font-size: 14px;">クリックで閉じる</div>
</div>
</div>

<script>
function openLightbox(url) {
document.getElementById('lightboxImage').src = url;
document.getElementById('lightboxOverlay').style.display = 'flex';
}
function closeLightbox() {
document.getElementById('lightboxOverlay').style.display = 'none';
}
</script>

この方法のメリットと使いかた
管理がラク: 移動先の「拡大ページ」をいくつも作成する必要がありません。このコードを1枚のページに貼るだけで完結します。
仕組み:

小さな画像をクリックすると、openLightbox という命令が走り、拡大用の黒背景が表示されます。
黒背景（または右上、下の文字）をクリックすると、closeLightbox が走り、パッと消えます。
書き換える場所:

小さな画像のURL①〜④：ページに最初から出ている画像のURL。
大きな画像のURL①〜④：クリックした時に出てくる高画質な画像のURL。
※もし「小さな画像」と「大きな画像」が同じもので良ければ、同じURLを入れておけばOKです。