Photo by
brandkojo
[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をコピペするだけ。ヌルっと動いて、該当箇所へスクロールできるようになりました。
今日は、ここまで。