サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】

はてなブログ JavaScript CSS

※追記(2018/01/15)
新しいバージョンを作ったので今後はこちらを参考にしてください。



前バージョンを公式の目次記法に対応させたり色々改良した版です。（2017/09/10更新）

やること

  • サイドバーに目次を設置
    • 現在位置の背景色変更
    • スクロールすると位置が固定（追尾）される
    • リンクをクリックするとスムーズスクロール
    • 目次記法使用時はリンクの内容を合わせる
      • 目次記法をクリックした時もスムーズスクロール

前回からの変更点

  • 目次記法に合わせて使う見出しタグをh2～h4からh3～h5に変更
  • リンクをクリックした時にURLを変更して履歴が残るように変更history.pushState()
  • モジュールタイトルを入れる場所を修正
  • 高さを計算する場所を少し改良

  • 読み込むjQueryのバージョンを変更
  • その他いろいろ修正


※追記(2016/12/30)

  • サイドバーの高さ計算法変更　（むしろなぜ今まで動いていたのか）
  • ヘッダーメニュー非表示に対応


※追記(2016/12/31)

  • 全体的に見直し


※追記(2017/09/10)

  • 「はてなブログをはじめよう！」まで表示しないように修正
    • entry-content の中だけ検索するようにしたので他にも表示されなくなるやつがあるかも

変更箇所


TODO

  • ウィンドウサイズ変更時の表示崩れの対応
    • (2017/03/11)作成途中の置いときます。完成したら新しく記事書くかも
    • (2017/10/09)まだしばらくかかりますが一応使えます
    • (2018/01/15) 新バージョン

やり方

HTMLとJavaScript

デザイン設定の[カスタマイズ]-[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける。
（タイトルは空白）

CSS

デザイン設定の[カスタマイズ]-[デザインCSS]に追加する。

色などは各自調整してください。

仕様

  • 目次記法による目次が表示されていない時のページ内リンクはsection0, section1...になります
  • サイドバーのmarginにマイナス値が使われているデザインでは大体ずれます　たぶん修正
  • レスポンシブデザインでは横幅を小さくした時などに表示が崩れます
  • 動作確認はGoogle Chromeの最新版で行っています
    • 古いブラウザでは上手く動かないかもしれません

少しだけ解説

このブログ（使用しているテーマはEpic）に合わせて作ったのでそのままでは追従する時の位置がずれる可能性が高いです。


JavaScript100～120行の辺が追従位置を決めるところなのでここを調整すれば合わせられるかも。
Chromeの場合F12を押すと開く画面の左上のアイコンを押すと色々調べられるので頑張りましょう（丸投げ）


ただし サイドバーに使っているモジュールのCSSにネガティブマージンが使われていたりするとずれなく合わせるのは厳しいです。（何かいい方法あるのかな…）

参考