すごいもくじカスタマイズ！固定ヘッダーバー利用時のスクロールオフセット変更

TOC+からすごいもくじにプラグイン移行しました。もくじのどの見出しがクリックされたか計測してくれる超画期的なヤツです。

今回紹介するのは、固定ヘッダーバーを利用した際、見出しへ飛んだ時に画面がスクロールしすぎる時の対処法です。

被って見えないの図

言葉より画像の方が早いですね。まずは画像をご覧ください。

 

ビフォア

見出しへ飛んだら、固定ヘッダーと被ってしまって見えません。

 

アフター

オフセットを変更し、丁度良い位置までスクロールするようになりました。

 

解決方法

それでは解決方法について書いていきます！

 

まずはFTPソフトで「すこいもくじ」プラグインのとあるファイルを取りに行きます。

上記ファイルをデスクトップにダウンロードします。

修正するファイルとは別に、バックアップフォルダを作ってコピーを放り込んでおいてください。万が一の時にすぐ戻せるようにしておきましょう。

 

テキストエディタで「script.js」を開きます。

Scroller.prototype._getOffsetAdjustment = function () {
	var adjustment    = 16;
	var $adminBar     = $('#wpadminbar');
	var $fixedElement = $(this._fixedElementSelector);

219行目の数値を変更します。

デフォルトでは16になっていますが、私は55に変更しました。

恐らくピクセル数。ヘッダーの高さによって最適解は異なります。

 

保存したら、FTPソフトでscript.jsを上書きアップロードします。

ブラウザのキャッシュをクリアし、更新して確認してみてください。

 

以上！

 

余談

このサイトのすごいもくじでは何故かクリック数が永遠に計測されていませんでした。今日色々試してみたら、どうも「WP Fastest Cache」と競合していたようで、オフにしたらクリック計測し始めました。

元に戻してキャッシュクリアしても継続して計測してくれました。ちょっとだけ様子見てみましたが、ちゃんと計測されてそうなので、同じ問題を抱えている人は参考にどうぞ！