2015年から利用できるようになっていたはてなブログの公式目次機能。
この機能をデフォルトのままで利用しようとすると、とんでもなく長く、且つ見難いものになってしまう…という弊害があったため、今まではなかなか使いはじめることが出来なかったんですよね。
しかし、私が運営しているクレジットカードの読みものでも徐々に長文記事が増え、探したい情報がすぐに見つからない状況が出てきたので、今回、やっと重い腰をあげて導入してみることにしました。
参考にしたのはYukihyさんのところ：
目次部分のデザインカスタマイズにおいて参考にしたのは下記記事。
こちらに掲載されている情報だけで誰でも簡単にカスタマイズできるので、『うちのブログにも目次を付けたい』と思っている方は是非、参考にしてみてください。
私が改造した部分を紹介：
私がデザインカスタマイズしたのは下記の部分です。
１．孫リストの非表示：
長文記事になると見出し量だけでとんでもないことになるので、目次として表示するのはh3とh4の見出しのみにしました。h5を非表示にするだけで、シンプルな親子リストのみになるので見やすくなります（孫、ひ孫まで含めると大変なことになる）。
２．目次タイトルにワンポイント：
目次タイトルにワンポイント、虫眼鏡のアイコンとオレンジの差し色を加えました。これによりパッと目につく目次になったので、クリック率を高めることができると思います。また、背景を加えることで、ここは本文ではなく目次なんだということを明示しました。
３．親リストには数値をふる：
Yukihyさんのところと同じように親リストには数値をふるようにしました。反面、子リストのほうには数値は振らず、「＞」のリストマークのみを設置。これで数字がごちゃごちゃに入り組むことがなくなったので、シンプルさが増したような気がします。
４．大きさを微調整：
親リストの大きさはテキストのデフォルトサイズのままに、子リストの大きさをそれよりも小さくすることでバランスを整えました。また、スマホ閲覧時には親リスト、子リストともにPC閲覧時よりも小さくすることで、横幅の小さいスマホへの対応とさせてもらっています。
こんな感じの目次になりました：
結果、完成した目次としてはこんな感じ。これを完成形まで持っていくために５時間以上かかりましたが、その作業量に見合うだけの目次が出来たように思います（こちらの記事）。
これで今後は長文記事を書いたとしても途中離脱されることなく、最後まで読んでもらうことができるはず…。離脱率の低下を狙えるのはもちろん、セッションあたりのページ閲覧数アップにも貢献してくれるはずなので、その効果に期待したいところですね。
他、細かいところを含めてウェブデザインも変更しています。引き続きより見やすく、それでいて気軽にお金を学べるサイトを目指して頑張りますよ。
以上、はてなブログの目次機能をデザインカスタマイズして使ってみた。これで長文記事ならではの途中離脱を、未然に防ぐことができるようになりそうです…という話題でした。
参考リンク：
ブログのアクセスアップを狙うなら、下記記事もあわせてどうぞ。どちらかというとビジネスでブログ運営している方向けの記事ですが、役立つ情報もあると思いますよ。