見出しごとにスクロールで移動する目次を表示する

table-of-contents-thumbnail

記事に目次を表示する方法を紹介します。

Healerには、記事に目次を入れられる機能があります。

目次はH2~H5の見出しを対象に自動で作成され、
クリックすることでその見出しまでスクロールします。

目次のデモ

目次のデモ

長い記事や見出し分けの多い記事に使用すると大変便利です。

実際に目次の入っている記事はこちらです。

initial-setting-thumbnail
Healerでサイト運営していくための初期設定方法を解説していきます。 Healerはどなたでも簡単に使えるような設計にしていますが、

挙動など触って確かめてみてください。

見出しごとにスクロールで移動する目次を表示する方法

テキストエディタ、ビジュアルエディタにそれぞれクイックタグがあります。

テキストエディタ

テキストエディタ

テキストエディタ

ビジュアルエディタ

ビジュアルエディタ

ビジュアルエディタ

こちらをクリックすると、
[toc]([]は半角)というショートコードが挿入されます。

あとは記事を更新するだけです。

HTMLの階層構造は間違えないように

見出しはH2タグから順番にH3、H4というように使用するのが基本です。

見出しタグは<h1>から始まり<h6>まであるが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけない。

繰り返しになるが、見出しタグはコンテンツの階層構造を正しく示すために使うものだ。見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになる。それでは、結果的にSEOにマイナスの影響を与えてしまう。

参考見出しタグの使い方と絶対に知っておくべき注意点

H2 ⇒ H3 と見出しが続き、大見出しのH2に戻るのは問題ありません。
目次を表示する際は、最初のH2見出しのすぐ上に置くようにしましょう。
table-of-contents-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。