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

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

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

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

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

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

【初期設定①】基本管理画面の設定

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

2016年06月15日

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

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

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

テキストエディタ

ビジュアルエディタ

こちらをクリックすると、
［toc］（［］は半角）というショートコードが挿入されます。

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

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

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

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

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

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

H2 ⇒ H3 と見出しが続き、大見出しのH2に戻るのは問題ありません。
目次を表示する際は、最初のH2見出しのすぐ上に置くようにしましょう。