☆迷走記☆スマートフォン用の表示で見る☆迷走記☆サラリーマンぽい人のランニング系雑記ブログ。雑記というか迷走しています。雑談あとで読む?遅ればせながら、目次が自動生成されるJavaScriptから目次記法に切り替えました。staff.hatenablog.com今使っているSolidテーマ向けに目次表示の部分のスタイルシートもいじったのでシェアします。今回もはてなブログを開設されている方々向けの記事です。目次記法の特徴どこにでも目次を挿入できる。最初に目次記法の特徴を挙げておきます。どこにでも目次を挿入できる。私が使っていたJavaScriptでの目次の自動生成ですと、目次の表示位置が決まっていました。私が使っていたJavaScriptでは記事の先頭に目次が表示されるようになっていました。目次記法の場合は、目次の表示位置を自由に指定できます。逆に目次記法を書いていない記事には目次は付きません。JavaScript版は見出しのある記事は過去記事を含めて勝手に目次を表示してくれます。JavaScript版を使っている人にとっては、ここが目次記法を使うか使わないかの判断ポイントになるのではないでしょうか。「続きを読む」状態でも目次が表示される目次記法では10月1日に機能改善されて「続きを読む」が表示されていても記事全体の目次が表示されるようになりました。staff.hatenablog.comブログのトップ画面の記事一覧にも各記事の目次を表示できますので、サイトを訪れた方に自分の興味がある記事かどうか判断し易くなります。大見出し~小見出しで階層表示されるこれも構造的な記事を書いた時にはうれしいですね。どんな内容の記事なのかを目次で詳細に示すことができます。最初に書いたように目次の表示方法をJavaScriptでの自動生成から、目次記法を使うように変えました。その際に目次記法で表示される目次の見栄えをスタイルシートで以下のように調整しました。調整した部分は以下のとおりです。目次を枠線で囲む標準のままの表示ですと目次なのか何なのかよくわからないため、記事本文とは違うことを示すために枠で囲みました。同じ理由で、目次の頭に「目次」という文言を表示するようにしました。目次の背景を透明に今使っているはてなブログのSolidテーマに馴染むように背景色を透明にしました。階層表示の際に各項の頭に表示されるマーカーが標準のものは気に入らなかったので変更しました。設定したスタイルシート以上のように目次の表示を調整したスタイルシートがこちらです。実際の見た目はこの記事の目次をご覧ください。はてなブログのSolidテーマでの、目次記法の目次用のスタイルシート。私のブログでは方にもちょこちょこカスタマイズしていますので同じSolidテーマを使っていても微妙にマッチしない部分があるかもしれません。さいごに今回の目次記法の表示をカスタマイズするにあたり、こちらの記事を参考にさせていただきました。ありがとうございます。2014中止の思い出と今も残る...今シーズンは異様ですね。失敗中...(はてなブログ無料版)満を持してHTTPSに切り替ええた所、いろいろ不具合が発生中です...2018-03-24初めてのマラソンでもまだ間に合う、サクッと読めるKindleマラソン本いよいよあさってはとくしまマラソン2018です。(8)「当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」はてなブログをはじめよう!fukuihiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。