ワタシはブログをBloggerではじめましたけど、htmlとかCSSの知識はもともとありません。
ですので、Bloggerを触りながら、必要があればネットでhtmlについて調べつつブログに落とし込んでいましたが、大変な勘違いを生んでいました。
やられましたな。
結論を言うと「記事を書くなら『段落』だ！」ということ。
何いってんだこいつって思う人いると思いますけど、初心者は絶対ハマる罠だって思います。
間違っても「標準」はダメだよってお伝えしたい。
Bloggerブロガーなら一度は参考にすると思われる、スケ郎さんのページ。
【Blogger】 初心者は真似したほうがいい！Bloggerカスタマイズの強者達＜６選＞！
Bloggerのカスタマイズは初心者でもできる！参考にしたい強者達のサイトを紹介します！
hibi-blo.blogspot.com↑でも紹介させて頂いてますが、目次を利用させていただいてます。
その目次が正しく表示されないケースもスッキリ解決される、大きな勘違いでした。
htmlがダメだ～という人は、ここまで。
今後Bloggerの記事は「段落」で書いてください！
では順に説明していきましょう。
Bloggerでの記事は「段落」で書こう！
なぜか？
それは余計な不具合の元となるから、です。
なぜ「標準」ではなく「段落」なのか
まずワタシの書き方ですけど、記事を書くときは「作成ビュー」でバーっと書きます。
「標準」で。 （←これダメですよ！）
まず、見出しとか小見出し候補を箇条書きで書いたあとに記事を書いていきます。
見出しとか小見出しとかの設定は、全部の記事を書き終わったあとに、まとめて設定します。
そこで、公開前にプレビューを確認すると思いますが、スケ郎さんの目次がずれることが頻発しました。
記事が長くなるとよく発生します。
そこで問題となるのが<div>だったんです。
でた！htmlです！
「標準」で記事を書くと、<div>が大量生産されるんです。
改行が「標準」は<div>、「段落」は<p>
記事を書いて改行を入れると、
- 「標準」は<div>
- 「段落」は<p>
がコードとして使用されます。
ブラウザで表示した際には、大きな違いは無いかもしれません。
これが編集する側にとってはまた違ってきます。
<div>とは？
詳細については省略（説明できない汗）しますが、グーグルで調べると、ブロックとか階層とかと説明されている方がいます。
<div>から</div>で挟んだ部分をひとまとめのグループ？箱？かたまり？に定義します。（あくまでも筆者のイメージです。）
例えば、「この行からこの行までを中央寄せにしたい」とか、「CSSで定義したスタイルをここからここまで使いたい」ってときにその範囲を指定するときに使用します。かね？
なので、普通に文章を書いていく上では、それほど出てこないし、必要ないものとも言えます。
<div>と<p>の違い
また新たなものが出てきました。
<p>。
ｐはparagraphの略。つまり段落です。
<p>と</p>で挟んだ部分の前後に改行を入れるものです。
<div>と<p>の違いは難しいんですが、<div>の中に<p>は入れられるけど、<p>の中に<div>は入れられないとか・・・。
イメージで良いと思うんですよね。趣味ですから。
- <div>はグループ
- <p>は前後に改行
です。（ごめんなさい）
あとは、
- </div>は省略できない
- </p>は省略できる
という違いもあります。
Bloggerでの<div></div>にはバグ！
これが一番の問題なんですけど、Bloggerでのバグで<div>が閉じられないことがあるんです！
つまり</div>が飛ぶんです！ないんです！
意図しない範囲をグループ化してしまうんです！
これがどういう影響をあたえるのか。
記事自体には大した影響は無いかもしれないけど、スケ郎さんの目次に対する影響は甚大なんです。
<div>を階層みたいなイメージとも言いましたけど、
↑みたいになるとおそらく目次は
のような順番になってしまうと思います。
このような入れ替わりが意図せず起こるんです。
先に</div>が省略できないと書きましたが、これを補完するためにBlogger側が</div>を足してくれているのかもしれません。
まとめ
これまでは、Bloggerの標準が「標準」なので、<div>が標準みたいな勘違いをしていました。（よくわからんけど）
目次がズレてしまう問題が発生するたびに、<div>を探して調整をしていました汗
なぜ、<div>がないの？どこ行ったの？って考えていました。泣
すべて、「標準」で作業をしていたために発生していた、余計な作業だったわけです。
<div>はブロック化、階層化なんです。
意図しないブロック、階層が作られ、不具合を産まないためにも、余計な<div>は無いほうがいいですよね？
ということで、これからワタシは
「段落」を使用する
の一択です。
以上、ワタシの愚痴みたいなものでした。
