HTMLで目次(Table of Contents)作成する方法(およびBloggerでの注意点)

HTMLでブログページの目次を作る場合、手順としては

• 目次からのジャンプ先にしたい要素に「id」を付ける
• 付けたidに対応したリンクを「<a href=>」で作り、それを目次としてまとめる

という感じ。要はブログページ内の任意の箇所に飛べるページ内リンクを作り、それらをまとめて目次として扱うというようになります。

idの付け方

idを付けるとき、要素はどれでもいいようですが見出し要素に付けるのが一般的かと。
例えば
<h2 id="midashi1">見出し1</h2>
となります。
この段階では単に要素に「id」を付けただけなので、このままでは何も機能しません。目次として機能させるには、それぞれの「id」を付けた箇所へジャンプするリンクを作り、それを目次としてまとめる必要があります。

idを付けた箇所へジャンプするリンクの作成

リンク書式としては、先程作ったidへのページ内リンクを作成する場合は
<a href="#midashi1">見出し1へのリンク</a>
となります。
これは相対参照のような扱いですが、URLをすべて記述して絶対参照のような書式でも書くことが出来ます。例えば
<a href="http://example.com/index.html#midashi1">見出し1へのリンク</a>
となります。

Blogger特有の事情

(以下の内容はあくまでも2018年12月4日現在で自分が確認してみた事情です。今後はこのBloggerの挙動は変わるかも知れません)

Blogger特有の事情について触れておきます。「id」作成は問題ないのですが、相対参照をBloggerでHTMLコードとして書く場合、
<a href="#midashi1">見出し1へのリンク</a>
と書くことも出来ますし、そのままブログとして公開してもページ内リンクとしてちゃんと機能します。そこまではいいのですが、編集モードでHTMLコード作成から通常の編集モードに切り替えると自動的にコードが以下のような形式で上書きされます。
https://draft.blogger.com/blogger.g?blogID=**************#midashi1
また通常の編集モードのリンク作成でもページ内リンクを作成しようとすると
http://#midashi1
とアタマに「http://」が付いた形式で作成されます。
こうなるとページ内リンクとしては機能しなくなるため、相対参照の書式で書くのは扱いが難しくなります。そして機能するようコードを書き直しても、編集モードを切り替えるとそこで上書きされてしまうのでやはり扱いが難しいです。

絶対参照として書いた場合は、編集モードを切り替えてもそのままで上書きされるということはありませんでした。ただブログページのURLが変わってしまうと絶対参照で書いた場合も機能しなくなるわけですが、まぁURLが変わってしまう(もしくは自分で変える)ということはそうそう無いでしょう。

「外部の編集エディタで目次を含めて作成しても、Bloggerにコードを貼り付けたら目次からのジャンプの挙動がおかしい」、みたいな場合はこういう事情を踏まえてコードを見直すといいかと思います。

その他の注意点

Bloggerでは使用するデザインテンプレートによりますが、ページ上部にヘッダーが表示されるものがあります。その場合、ページ内リンクでジャンプするとジャンプ先の出だしの数行がヘッダーの後ろに来て隠れてしまうことがあります。
このへんは簡単な対処としてはCSSのスタイル変更でジャンプするときの挙動を変更すればいいようです。

---

Amazon HTML関連の書籍