自分のブログの目次がおかしくなった時の対処法
こんにちは、鬱太郎です。先ほど自分のブログを眺めていたら、目次項目がおかしくなっていることに気づきました。それについてまとめます。
目次がおかしい
このスクショを見てください。何かおかしくありません？
- 1番目の項目が空
- 3番目の項目がずれている
実害はないけれども、めっちゃ気になる！
ということで、これの原因を探して対処しましょう。
そもそも目次ってどうやって作られるの？
はてなブログにある目次の埋め込みはどうやって作られるのでしょうか？はてなブログにある説明を調べてみました。
この説明を要約すると、
- 目次は記事の見出しから、自動的に作られる。
- 目次はすべての編集モードで [:contents] を使うことで作成できる。
- 見出しもすべての編集モードで作ることができる。
ということです。今回目次が正しく表示されない現象の原因がなんとなくわかりましたね。そう、記事の見出しに何か原因がある可能性が高いということです。
見出し（<h>タグ）を探せ！
原因を特定するために見出しを探してみます。見たまま編集モードでは探しにくいので、HTML編集モードを使います。
ん？これはなんだぁ？
<h4>タグで囲まれている部分に「・」しか入力されていない！これが1番目の目次項目が空欄だった原因ですね。
おそらく「・」はスペースのことを指し、赤くなっているのは警告だと思います。さっさと消しときましょう。
他にも問題がないかを調べてみると、
見出しの中身の始めにまたまた「・」が！ これも消していきましょう。
ふぅ。長かったですがおそらく目次は正しく表示されるようになってることでしょう！
目次の乱れは見出しにあり！
ジャジャーン（効果音）
綺麗に表示されるようになりました！これにて問題解決です。ブログ編集はそのまま編集だけでなく、HTML編集も見るのも大事だと実感しました。
