Luxeritas の目次をカスタマイズ［追尾ウィジェット編］

2017年11月29日2017年12月4日Luxeritas

Luxeritas の目次自動挿入機能で使える『ウィジェット目次』のカスタマイズです。

追尾エリアに設置して追いかけてくるようにしました。

デフォルトだとせっかく目次があっても目立たないので、背景にも色を付けて目につくようにしてみました。ついでに見出しが多く長くなりすぎるのをおさえるため、max-heightをULの部分に設定した上でスクロールもさせるようにしています。

ウィジェットタイトルのh4見出しはマージンが大きいので使わず、疑似要素::beforeで見出しとしています（#side のH4タグのマージンを変更してしまってもいいのですが、後で他のH4を挿れた時に面倒になるので疑似要素で対応しています）。

追尾ウィジェットへの挿入は「スクロール追従サイドバー（H4タイプ）」で行えます。

追尾エリア目次ウィジェットの構造

ウィジェットもUL部分は本文と同じ構造です。本文なら.postですが、ウィジェットは#side で調整します。

コンテナ： .thk_toc_widget、 .toc_widget
ul　： .toc_list
番号： .toc_number、 .toc_depth_1

やったこと

• 見出しをつけずに追尾ウィジェット設置
• 見出しは.toc_widgetの疑似要素::beforeで設置
• 追尾エリアは横幅に制約があり、番号があるとうるさいので消す
• 最大の高さを設定して、大きすぎてあふれる時はスクロールバーを出すoverflowで対応
• paddingとmarginの調整

手がかかるのはパディングとマージンの設定部分くらいで、やっていることは単純です。

/*　番号を消す　*/
#side .toc_number{display:none;}
/*　目次ULに背景色をつける　*/
#side .toc_widget{background: #f4f5f4;}
/*　目次の文字を疑似要素で挿入　*/
#side .toc_widget::before{
content:'本文の目次';display:block;text-align:center;
height:35px;font-size:20px;line-height:1.8;
background:#518D79;color:#fff;border:0;
}
/*　ULの最初のLIの前にだけマージンを10px（見出しまでの間隔）　*/
#side .toc_list:first-child{margin-top:10px;}
/*　ULの余白とサイズ調整　*/
#side .toc_list{padding:0 8px 8px 12px;margin:0;
overflow: auto;max-height:350px;
}
#side .toc_list li{font-size:14px;}

配色からしてセンスがないので美しく見えませんが調整はしやすいと思うので、よかったら使ってください。

関連Luxeritasまとめ