目次記法はじめました
遅ればせながら、目次が自動生成されるJavaScriptから目次記法に切り替えました。
今使っているSolidテーマ向けに目次表示の部分のスタイルシートもいじったのでシェアします。
今回もはてなブログを開設されている方々向けの記事です。すみません。
目次記法の特徴
最初に目次記法の特徴を挙げておきます。
どこにでも目次を挿入できる。
私が使っていたJavaScriptでの目次の自動生成ですと、目次の表示位置が決まっていました。
私が使っていたJavaScriptでは記事の先頭に目次が表示されるようになっていました。
目次記法の場合は、目次の表示位置を自由に指定できます。
逆に目次記法を書いていない記事には目次は付きません。
JavaScript版は見出しのある記事は過去記事を含めて勝手に目次を表示してくれます。
既にJavaScript版を使っている人にとっては、ここが目次記法を使うか使わないかの判断ポイントになるのではないでしょうか。
「続きを読む」状態でも目次が表示される
目次記法では10月1日に機能改善されて「続きを読む」が表示されていても記事全体の目次が表示されるようになりました。
ブログのトップ画面の記事一覧にも各記事の目次を表示できますので、サイトを訪れた方に自分の興味がある記事かどうか判断し易くなります。
大見出し～小見出しで階層表示される
これも構造的な記事を書いた時にはうれしいですね。
どんな内容の記事なのかを目次で詳細に示すことができます。
目次記法向けのスタイルシートの紹介
最初に書いたように目次の表示方法をJavaScriptでの自動生成から、目次記法を使うように変えました。
その際に目次記法で表示される目次の見栄えをスタイルシートで以下のように調整しました。
調整した見栄えの詳細
調整した部分は以下のとおりです。
目次を枠線で囲む
標準のままの表示ですと目次なのか何なのかよくわからないため、記事本文とは違うことを示すために枠で囲みました。
最初に「目次」と明記
同じ理由で、目次の頭に「目次」という文言を表示するようにしました。
目次の背景を透明に
今使っているはてなブログのSolidテーマに馴染むように背景色を透明にしました。
階層表示のマーカーを変更
階層表示の際に各項の頭に表示されるマーカーが標準のものは気に入らなかったので変更しました。
設定したスタイルシート
以上のように目次の表示を調整したスタイルシートがこちらです。
実際の見た目はこの記事の目次をご覧ください。
はてなブログのSolidテーマでの、目次記法の目次用のスタイルシート。
私のブログでは方にもちょこちょこカスタマイズしていますので同じSolidテーマを使っていても微妙にマッチしない部分があるかもしれません。ご注意ください。
さいごに
今回の目次記法の表示をカスタマイズするにあたり、こちらの記事を参考にさせていただきました。
ありがとうございます。
【参考資料】
【関連記事】
