このブログではスケ郎さんが公開してくださっている目次自動生成のプラグインを使わせてもらっています。

ものすごく簡単で、こういったものを公開してくださっていることには感謝しかありません。ありがとうございます！

[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）

自分がブログを書いていく中で少しつまずいたことがあり、
覚書として残しておこうと思います。

Bloggerの目次の表示がおかしくなる？



正常であれば以下の画像のように表示されるはずが


以下、のように目次が重複して表示されてしまうのです。

何かがおかしくなっているようなのですが、原因がよくわかりませんでした。


Bloggerの仕様について



Bloggerで文章を作成する際には、文のひとまとまりに自動的に<div></div>タグが挿入されます。

下の画像はこの記事のHTML編集画面です。


このような感じで<div></div>タグが挿入されます。


目次の表示がおかしくなる原因



スケ郎さんが先程紹介した記事のコメント部分でも指摘してくださっているのですが、
この目次プラグインは同じ種類見出しのタグが同じ階層にあることが前提となっているようです。

Bloggerの仕様上、
自分では意図しない位置に<div></div>タグが入ってしまい見出しタグの階層をずらしてしまうということがわりと頻繁に起こってしまうのです。

【正】
<h2></h2>
<h2></h2>
<h2></h2>

【誤】
<h2></h2>
<div><h2></h2></div>
<h2></h2>


目次の表示エラーをなくすためには？



個人的に<div></div>タグの位置がおかしくなってしまったと感じる場面としては以下の３つです。
  • 見出しタグを途中で入れながら文章を作っている時
  • 画像の挿入をしながら文章をつくる
  • あとで改行を挿入してレイアウトを整えているとき
これらをしているときは目次の表記がおかしくなりがちです。
目次自動生成を使わない場合はそこまで気にならないと思うのですが、
このプラグインを使う場合は<div></div>タグの自動挿入を見越した上で記事作成を行うほうが後々楽です。

Bloggerの<div></div>タグ仕様については涙りんたろうさんが記事にまとめてくださっています。

【Blogger】改行が<br/>だけのときと<div>が入るときの違い

すごく参考になる記事で本当にありがたいです。

Bloggerはとても便利な半面、使用者が少ないためトラブルが起こった際に解決まで時間がかかってしまうことも多いですがちょっとでも自分の体験が役に立てば嬉しいです。