<p> <img src="../../blog-media/bz12/img-xxxxx.webp" alt="" style="cursor: zoom-in;" id="zoomImage-xxxxx"> </p> <div style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000;" id="overlay-xxxxx"> <img src="../../blog-media/bz12/img-xxxxx_o.webp" alt="" style="max-width: 90%; max-height: 90%;"> </div> <script> const img-xxxxx = document.getElementById('zoomImage-xxxxx'); const overlay-xxxxx = document.getElementById('overlay-xxxxx'); img-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'flex'; }); overlay-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'none'; }); </script>
画像ファイル名と"ID"を編集。
拡大画像（元画像）の幅が 922px 以下ならば、「img-xxxxx_o.webp」は存在しない。「img-xxxxx.webp」が元画像と同じサイズなので、「img-xxxxx_o.webp」を「img-xxxxx.webp」に読み替えてください。