はてなブログの目次を自動生成するjQueryのコードでh3も含めるようにする
はてなブログの目次を自動生成するjQueryのコードなんですが、ネット上をさがしてもあまりいいものがありませんでしたので、自分で作ってみました。しかし自分でつくったというよりは人が書いたコードを少し改良したものになります。
はてなブログの目次を自動生成するサンプルコード
See the Pen Untitled by 最高秀作はSA2 (@onitikushou) on CodePen.
特定の要素だけカウントしない処理（目次に含めない）
はてなブログの場合、目次を自動生成するときにentry-contentクラスの見出しをカウントするのですが、そのなかにはてなブログがあらかじめ用意している「はてなブログをはじめよう！」という記事のコンテンツに関係ない見出しまで目次にされてしまいます。しかもこれが厄介なのはPC表示ではこの要素は表示されないようになっていて、スマホのときだけ表示されます。まあなにはともあれ「はてなブログをはじめよう！」という見出しはいりませんのでこれを除外する処理が必要です。
jQueryの除外処理
jQueryの除外処理は簡単でnot()を使うことで簡単に特定の要素を除外することができます。
画像にあるいらない見出しの親要素のクラスをみてみると、div要素にguest-footer-contentというクラスが付与されているのがわかりますね。なので該当の見出しをを除外したい場合は、not('.guest-footer-content h3')とすればOKですね。ちなみにこちらの構文は埋め込みコードペンのJSの8行目あたりにあります。
目次のリストマーカーは表示しないようにする
htmlのリストにはリストマーカーというものがあり、リストに「・」や「1.」などが表示されます。サンプルコードではCSSでこのリストマーカーを削除しています。cssのolプロパティにlist-style: none;を指定しリストマーカーを削除しています。リストマーカーを削除しておかないと、「1.1.」のようになりますのでcssで表示しないようにしましょう。
リスト全体をリンクにするかどうか...
サンプルコードでは番号をspanタグで囲って全体をリンクにしていません。わたしはSEOとかについてはよくわかっていませんがこちらは気分しだいでいいのではないでしょうか？
html、css、javascriptが全くわからない人はどうすればいいかわからないかもしれませんが、下記の部分を書き換えれば全体をリンクにすることもできます↓
list += '<li class = ' + className + '><span>' + count + '.' + '</span><a href="#' + idName + '">' + $(this).text() + '</a></li>';
どこにこのコードを貼り付けるか...
はてなブログの場合はヘッダー、フッダー、記事上、記事下などいろいろな場所にコードを貼り付ける場所があります。自分の場合はフッターにコードを記述しています。貼り付け位置に関しては厳密にいうとここのほうがいいというのがあるかもしれないですが、あまり気にしてもしょうがないので、気分次第でいいかと思います。
追記
ごちゃごちゃかいてますが、最終的なコードは全部ここに書きましたので気になる方はこっちもチェックしてみてください
