お問い合わせはコチラから

Lazy Loadで目次のジャンプ先がずれてしまう場合の対処方法

サイト運営

目次プラグインは便利なので利用している人は多いでしょう。しかし、ブロックエディタを使っていると見出しの飛び先がずれるという現象に出くわします。

例えば、目次プラグインなどで挿入した目次から見出しにジャンプする時にズレたり(手前の変な位置で止まる)、ズレなかったりということがあります。

この記事では、目次プラグインを使用した時にジャンプした時に見出しからずれてしまう原因と対策をまとめています。

目次プラグインの飛び先がずれてしまう原因

実は、この現象は、LazyLoadプラグインを使用して、スムーズスクロールを使用している組合せで発生します。

LazyLoadプラグインで画像を遅延読み込みしていると、スムーズスクロールなどのJavascriptで計算した見出し位置がスクロール中に変わります。画像が読み込まれる前と後では見出しの位置が下がるので、ズレが発生するわけです。

この現象は、imgタグにheightとwidthがあればLazy Loadを使用していても問題が起きないケースもありますが、残念なことにブロックエディタを使用しているとimgタグにheightとwidthは初期状態で付加されません。そのため、ブロックエディタの使用率が高まるにつれて目次プラグインとLazyLoadプラグインを併用している時に見出しにジャンプする時にズレるという現象が起きやすくなっています。

目次プラグインの飛び先がずれる場合の対策は?

対策は、対処療法的なものを含めると結構あります。

目次プラグインの飛び先がずれる場合の対策
  • LazyLoadプラグインを使用しない
  • スムーズスクロールをやめる
  • imgタグにheightとwidthを追加する
  • スムーズスクロールを改造する

LazyLoadプラグインを使用しない

原因が画像の遅延読み込みなので、LazyLoadプラグインを使用しなければ問題は起きません。

Page Speed Insightの点数を上げるためにLazyLoadプラグインを導入している人がほとんどだと思いますので、この対策を採用するケースはまずないと思います。

スムーズスクロールをやめる

スムーズスクロールするために、飛び先の見出し位置を計算するのが間違いの原因なので、スムーズスクロールそのものをやめることで、飛び先の位置がずれることは無くなります。

プラグインを使用して目次を入れる場合は、以下の2つのどちらかでしょう。

このうち、easy-table-of-contentsはプラグインの機能としてsmooth scrollをサポートしていますが、 table-of-contents-plusは smooth scrollの機能はついていません。

目次の見出しをクリックして飛び先がずれる現象は、 easy-table-of-contents プラグインを使用している場合に発生しますが、 table-of-contents-plusプラグインを使用している場合には発生しないことになります。

easy-table-of-contents プラグインは、smooth scrollオプションをOFFにすることができます。OFFにすれば、問題は発生しません。ただし、smooth scrollオプションをOFFにするとジャンプする時にどこに飛んだのかわかりにくいのでできればOFFにしないで済ませたいところです。

imgタグにheightとwidthを追加する

ブロックエディターを使用する以前、classicエディタの時代はimgタグにheightとwidthが付加されれるのを嫌っていました。ブロックエディタで画像ブロックで画像を挿入すると、heightとwidthはHTMLに付加されません。

imgタグにheightとwidthがあると、 LazyLoadを使用しても飛び先の見出し位置の計算時にズレが無くなります。

ブロックエディタでimgタグにheightとwidthを追加する方法

ブロックエディタの画像ブロックを使用していても、imgタグにheightとwidthを追加することができます。

完全自動ではないので少し面倒ですが、仕組みとして存在するということは覚えておいて損はありません。

100%という部分をクリックすると、HTMLタグにheightとwidthが挿入されます。

スムーズスクロールを改造する

easy-table-of-contentsはプラグインを使っている場合にはSmooth scrollのjQueryプラグインが組み込まれています。

プラグインのjavascriptを改造することでLazyloadプラグインを使用していても目次クリック時の飛び先のずれを無くすことができます。

修正の考え方はシンプルです。smooth scrollのjQueryの実行前後で飛び先の位置を保存、お互いに比較して違う場合は再度smooth scrollを実行するという流れを、違いがなくなるまで繰り返します。javascriptの場合は手続き的に書きにくいのですが、幸いcallback関数が使えるので再帰的に呼び出しています。

front.jsを改造

          if ( target ) {
						
						_smoothScroll(target,offset);
			
//						$.smoothScroll( {
//							scrollTarget: target,
//							offset:       offset,
//                      beforeScroll: deactivateSetActiveEzTocListElement,
//                          afterScroll: function() { setActiveEzTocListElement(); activateSetActiveEzTocListElement();   }
//						} );

					}

        // ======================================
        // 移動に失敗したら追加で移動するカスタマイズ
        // ======================================
		function _smoothScroll(target,offset) {
						var old,now;
				$.smoothScroll( {
							scrollTarget: target,
							offset:       offset,
                            beforeScroll: function(){
								//移動先を保存
								old = $(target).offset().top;
								deactivateSetActiveEzTocListElement(); // ()を追加
							},
                            afterScroll: function() { 
								now = $(target).offset().top;
								setActiveEzTocListElement(); 
								activateSetActiveEzTocListElement(); 
								if(now != old){
									//もう一度スクロール
									_smoothScroll(target,offset);
								}
							}
						} );
		}

front.jsを差し替える

function add_theme_scripts() {
    wp_dequeue_script( 'ez-toc-js' );
    wp_deregister_script( 'ez-toc-js' );

wp_enqueue_script( 'ez-toc-js', get_stylesheet_directory_uri() . "/assets/js/front.js", array( 'jquery-smooth-scroll', 'js-cookie', 'jquery-sticky-kit'),1.0, TRUE );
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

まとめ

プラグインのjavascriptを変更するのは、メンテナンスのことを考えると避けたいのですが、個人的に興味があったのでLazyLoadプラグインと目次プラグインで見出しの飛び先がずれる問題を解決してみました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました