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...