WordPressテーマ｢SANGO｣｜目次のページ内リンクがずれる原因と解決方法

ここ最近、目次リンクの遷移先がずれる現象に悩まされていました。

コードを確認しても、特に問題があるように見えないし、2〜3度「目次リンク」をクリックすると最終的には、正しい遷移先（目的の見出し）に移動します。

なんでこうなるんや…と結構長い時間悩まされていましたが、色々試した結果、「原因」と「解決方法」がわかりました。

・・・

まず原因ですが、この現象に悩まされている方は、（おそらく）SANGOのバージョンが2.0以上、かつ、”画像の遅延読み込み設定”を行っているかと思います。

原因

ぼく

場所は、サイドメニューの「外観 → カスタマイズ → 高速化」をクリックした先にあります。

画像の遅延読み込み設定を行うと、ブラウザ（画面上）で見えている範囲の画像しか読み込まれません。

これによりサイトの表示速度を早めている訳です。

ぼく

通常は、そのページに設置してある全ての画像が読み込まれるため、画像をたくさん設置していると、その分表示速度が遅くなります。

そんな恩恵にあずかれる「画像の遅延読み込み設定」ですが、ページ内リンク（目次リンク）との相性は最悪です。

ページ内リンクは、目印をつけた箇所に、一瞬で移動する仕組みです。

ただ、「画像の遅延読み込み設定」を行っていると、ブラウザ（画面上）で見えている範囲の画像しか読み込まれないため、それより下の画像は無いものとして扱われます。

そのため、設置している画像の高さ分だけ、位置がずれる…という訳です。

・・・

解決方法は単純。画像の遅延読み込み設定を外すことです。

解決方法

これで、目次リンクの遷移先が”ずれる”ことはないかと。

ただ、当然のことながら、ページの表示速度は落ちます。

ひとまず代案として、画像の遅延読み込みプラグインである「Lazy Load」を導入したところ、「目次リンクの遷移先に問題がない」ことを確認しました。

ぼく

しばらくは”コレ”で乗り切ります。

そんな感じで。終わりッ！！

¥1,540
(2025/01/26 10:12:38時点 Amazon調べ-詳細)