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

WordPressテーマ「SANGO」で目次(Easy Table of Contents)のページ内リンクがずれる原因と解決方法

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

WordPressテーマ「SANGO」で目次(Easy Table of Contents)のページ内リンクがずれていることを表す画像

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

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

・・・

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

原因

ページ内リンクのジャンプ先がずれる原因

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

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

画像の遅延読み込みの説明

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

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

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

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

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

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

画像の遅延読み込み設定の弊害

・・・

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

解決方法

ページ内リンクのジャンプ先がずれる|解決方法

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

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

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

プラグイン「Lazy Load」

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください