Blogger記事画像をクリックしたとき画像モーダル（ライトボックス）が立ち上がらない不具合の解消方法

このブログはBloggerを使っている。Bloggerの標準機能により、記事画像をクリックすると画像単体の表示枠（モーダルウィンドウ、ライトボックス）が立ち上がってフルサイズ画像が表示される。

しかし最近なぜかこの機能が動かなくなり、ただのフルサイズ画像への直リンクとしてしか機能しなくなってしまった。

雑に解決する方法を探してきたので、とりあえず備忘録を起こす。

「牧草地風のライトボックス」by ChatGPT

問題状況のスクショ

以下のような記事画像をクリックする。

このとき、期待される表示は以下である。

問題発生時の表示は以下のようになる。これは、ただ画像ファイルをブラウザタブで表示しているだけの状態だ。

不具合について補足

• シークレットモードや別ブラウザなども試してみた結果、どの環境からでもエラーになることがわかった。
• 突然動かなくなったことの根本原因はわからないが、どうもJSの読み込みエラーみたいなことが起きているようだ。
• エラーが起きる条件も微妙で、すべての記事で不具合が発生するわけではなく、一部少数の記事では期待どおりに動作したりもしていた。
• JSの遅延ロードまわりでなにかありそうだが、フロント利用者の立場でデバッグするのは辛いだけなので、そういった解析は扱わないことにする。

とりあえず動くように直す方法

Blogger管理画面 → テーマ → カスタマイズ▼ → HTMLを編集

テンプレートの末尾にある </body> 手前に以下を挿入する。

<!-- Blogger標準のライトボックス -->
<script src='https://www.blogger.com/static/v1/widgets/1053349651-widgets.js'/>
<script type='text/javascript'>
    window.onload = function() {
        if (typeof registerImageLightbox === &#39;function&#39;) {
            registerImageLightbox();
        }
    };
</script>

保存して記事ページをリロードしてみる。不具合が解消していればOK。