[Blogger #006]　自動目次とスムーズスクロールを真似する

ちょっと、間が空きました。辞めてはいません。とりあえず、記事がないと寂しいので、以前にノートに書いたネタからコピペして貼ってみました。さて、そこで、気づく目次の存在。ノートは公開時に目次作れますもんね。これを Blogger のほうにも搭載します。

自動目次を追加

例によって、ふじろじっくさんとこの記事を参考にパクります。ここのページのHTMLを貼り付けて、完成！

自動目次とスムーススクロール

と思いきや、まあ一発ででることなんてないですよね。HTML見て確認すると、目次にするhタグが決められてる。ここ。

var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 3,
insertPosition: "firstHeadBefore",

ｈ２タグがメインの見出しなんでこれがないとだめ。本文のHTMLみてみると小見出しになってる。小見出しだとHTMLで確認するとh3でした。

なので、これを見出しに変更してやると、無事でました。こんな感じ。

目次がでない、段落おかしい、などの原因と対応

３－１．っていう何もない項目がでちゃってる。本文、HTMLみたら、挿入してる画像がh3タグで囲まれてました。Blogger のエディタ、あれこれ編集している間に、html上だとぐちゃぐちゃになっちゃうんですよね。ぶっちゃけ、使いにくい。

目次がでなかったり、段落おかしかったら、記事のHTMLを確認しましょう。hタグだけでなくて、divの組み合わせに整合性がとれてないみたいなのもあります。

あとは、余白とか微妙にきになるので、これからCSSをちょっと弄りますかね。

スムーズスクロールを追加

jQueryは既に入れてあるので、HTMLをコピペするだけ。ヌルっと動いて、該当箇所へスクロールできるようになりました。

今日は、ここまで。