ブログを見る時に今どの位置にいるのかを知りたいことってないですか？
特に見出しの数が多い場合、いちいちTOPまで戻って目次から飛びなおすのは面倒くさいですよね。
特にこのブログでは見出しが多い記事を書くことが多いので、そういう仕組みがあると非常に便利です。
よくQiitaなどで見るアレです。
実は以前からこの仕組みは導入していましたが、見出しの数が多い場合に見切れてしまっていました。
そんな時に見つけた新しい仕組みを導入したらうまくいきましたので、改めて導入手順を記事にしてみました。
参考にさせていただいたサイト
こちらのサイトで公開されていた仕組みを使わせていただきました。
twilyze.hatenablog.jpできること
・サイドバーに目次を設置
・スクロールすると追尾する
・現在位置の背景色変更
・リンク先へのスムーズスクロール
・ウィンドウサイズ変更に合わせてサイズ変更
・記事ページ以外でもページ内の記事一覧などを表示
まさにこれ！
設置方法も書いてある通りで出来ましたし細かい設定なども可能です。
作者のトワさん(id:Twilyze)に感謝です！
設置方法
設置方法は本当に先程のサイトに書いてある通りなのですが、実際にやった手順を説明します。
HTMLをサイドバーに貼り付ける
まず記事の管理画面からデザインを選択
カスタマイズ→サイドバーを選択
モジュール追加を選択
HTMLを選択して元サイトに記載しているスクリプトをコピペします。タイトルはあってもなくてもよいです。
Javascriptをフッタに貼り付ける
記事の管理画面からフッタを選択して元サイトに記載されているJavascriptをコピペします。
サイトに合わせて設定をカスタママイズできるのですが、自分は以下の設定を変えました。
{
class : 'page-index',
title : 'このページの記事一覧',
listPage : true,
display : true → false
},
{
class : 'page-archive',
title : 'このページの記事一覧',
listPage : true,
display : true → false
},
page-index、page-archiveを有効にするとトップページでも目次を表示してしまうので無効にしました。
CSSを追加する
記事の管理画面からデザインCSSを選択して元サイトのCSSをコピペします。
ここは特にいじらずにそのままコピペしました。
最後に変更を保存して終了です。
動きを確認
うまく適用できたか確認します。
いい感じです！
見出しの数が多い時もちゃんとスクロールバーが出てきます。
さいごに
ということでサイドバーに現在位置を表示する目次を設置できました。
ほぼコピペで設置できるので初心者の方も簡単に設置可能です。
サイドバーの最後が空白で何も表示されない方はこの仕組みを導入してみてはどうでしょうか。
ここで紹介した以外にもカスタマイズが可能なのでしりたい方は参照元のトワさんのブログを確認してみてください。
それでは！
