はてなブログスマホ版のページ内リンク位置調整を無効にする簡単な方法

今回の記事は、前回の記事の延長線上の記事です。

そして、非常に短い記事です。

なぜ短いかといえば、するべきことが超簡単だからです。

前回の記事では、ページ内リンクのズレを解消する方法を記載しています。

この位置調整なのですが、もともと固定ヘッダーを設置しているはてなブログのスマホ版では、標準仕様で位置を調整してくれます。

なので、カスタマイズして固定ヘッダーを消しても位置調整は機能するので、固定ヘッダー分の余計な余白ができます。

まあ余白ができるだけなので気にしなくてもいいかもしれませんが、ズレるのが気になる方もおられると思います。わたしのように。

今回は、その機能をひと手間で無効にする非常に簡単な方法です。

スマホ版のリンク先位置調整を無効にする方法

スマホ版のページ内リンクの位置調整は JavaScript ( jQuery ) で行っています。

で、このスクリプトを見たところ固定ヘッダーの状態で機能するかどうかを条件分岐しています。

つまり globalheader-containe が固定（position:fixed ）かどうかで位置調整するかを判断しているのです。

なので、このCSSを変更すれば位置が変わらなくなります。

#globalheader-container {
    display: none;
    position: static !important;
}

このプロパティには!importantが付いているので、標準のCSSより後に書くか、セレクタの優先順位を上げて記述して下さい。

設定項目の詳細設定にある【headに要素を追加】に記述する場合、次のように優先順位を上げて書くと良いでしょう。

<style>
  div#globalheader-container {
    display: none;
    position: static !important;
  }
</style>

これだけで、はてなブログのスマホ版でリンク位置の自動調整が機能しなくなります。

たったこれだけのことです。簡単です。

ただ、この方法は開発側のスクリプトに依存しているので、その仕組みが変われば機能しなくなる可能性があります。

とはいえ、ほんとうにちょっとしたことなので、この方法で無効になるならこれで良いかな、と思っています。

ご参考になれば幸いです。