見出しごとにスクロールで移動する目次を表示する
2018年6月20日
便利機能の使い方
便利機能の使い方

記事に目次を表示する方法を紹介します。
Healerには、記事に目次を入れられる機能があります。
目次はH2~H5の見出しを対象に自動で作成され、
クリックすることでその見出しまでスクロールします。

目次のデモ
長い記事や見出し分けの多い記事に使用すると大変便利です。
実際に目次の入っている記事はこちらです。

Healerでサイト制作をするための初期設定方法を解説していきます。
Healerはどなたでも簡単に使えるような設計にしていますが、
挙動など触って確かめてみてください。
見出しごとにスクロールで移動する目次を表示する方法
テキストエディタ、ビジュアルエディタにそれぞれクイックタグがあります。
テキストエディタ

テキストエディタ
ビジュアルエディタ

ビジュアルエディタ
こちらをクリックすると、
[toc]([]は半角)というショートコードが挿入されます。
あとは記事を更新するだけです。
HTMLの階層構造は間違えないように
見出しはH2タグから順番にH3、H4というように使用するのが基本です。
見出しタグは<h1>から始まり<h6>まであるが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけない。
繰り返しになるが、見出しタグはコンテンツの階層構造を正しく示すために使うものだ。見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになる。それでは、結果的にSEOにマイナスの影響を与えてしまう。
H2 ⇒ H3 と見出しが続き、大見出しのH2に戻るのは問題ありません。
目次を表示する際は、最初のH2見出しのすぐ上に置くようにしましょう。