はてなブログのHTML編集で目次リンクを設定する方法【コピペOK】
目次
はじめに
当記事の目的
当記事の目的は、はてなブログでHTML編集で記事を書いている人に向けて、 見出しタグから自動で目次リンクを作成する方法を紹介することです。
はてなブログで目次を作成する方法
はてなブログには編集モードが複数ありますよね。
- みたまま編集
- はてな記法編集
- Markdown編集
- HTML編集
はてなブログでは[:contents]
と記事に書けば自動で目次を生成してくれます。
しかし、HTML編集だけは[:contents]
と書いても目次は作成されません。
はてなブログのHTML編集で記事を書いている場合、目次の作成は個別にコーディングする必要があるのです。
今回紹介するJavaScriptを使えば個別にコーディングする必要はなくなります。
必要のある作業はコピペだけです。
目次のサンプル
当記事の目次も今回紹介するJavaScriptから自動生成しています。
記事の上の方にある目次を見てみてください。
目次の各項目をクリックすると該当の見出しタイトルへジャンプするようになっています。
はてなブログのHTML編集で使えるJavaScript
コピペOKのJavaScript
以下に見出しタグから目次リンクを自動生成するJavaScriptのコードを記載しました。
はてなブログでの使い方
以下の2つだけです。基本的にコピペすればOKです。
-
JavaScript(
<script>〜</script>
)を記事内の一番下にコピペする -
目次が生成される先として
<div id="toc"></div>
を設置する
なお、ご存知の通り、記事を表示するタイミングでJavaScriptで目次リンクを生成しているので少なからず描画に時間がかかります。
描画時間をかけたくない場合は今回紹介したJavaScriptで目次を生成し、生成されたものをコピペして使えばいいと思います。
おわりに
今回ははてなブログの記事をHTML編集で書いている人に向けて、目次リンクを自動生成するJavaScriptを紹介しました。
目次リンク作成に困っていた人の役に立てたらうれしいです。