本文に設定した見出しから自動で目次を作成する

広告

はてなブログでは本文に入力したテキストに対して見出しを設定しておくと、見出しから自動で目次を作成する機能が用意されています。ここでは見出しから目次を自動で作成する手順について解説します。

目次を自動で作成する

それでは実際に試してみます。記事の新規作成画面を表示し、次のように記事のタイトルや本文を入力しました。

目次を自動で作成する(1)

本文に記入したテキストの中で、次の部分に対してそれぞれ大見出しを設定しました。(見出しを設定する方法については「見出しを設定する」をご参照ください)。

目次を自動で作成する(2)

続いて目次を設定します。目次を表示したいところにカーソルを合わせたあと、「目次」アイコンをクリックしてください。

目次を自動で作成する(3)

カーソルがあった位置に [:contents] と表示されました。

目次を自動で作成する(4)

それでは記事をプレビューしてどのように目次が表示されるのかを確認してみます。

目次を自動で作成する(5)

目次を自動で作成する(6)

[:contents] があった位置に目次が自動で作成されて表示されました。目次に表示されているリンクは、ページ内の各見出しへのリンクになっています。

なお今回はすべての見出しに大見出しを設定しましたが、中見出しや小見出しを設定しても自動で作成される見出しの見た目は変わりがありません。下記はすべての見出しを中見出しにした場合に作成されて目次です。

目次を自動で作成する(7)

大見出しや中見出しが混在している場合

記事の本文で大見出しや中見出しが階層構造で混在している場合、目次を自動で作成すると目次も階層構造になります。例えば次のように大見出しから小見出しまでが設定された記事で試してみます。

大見出しや中見出しが混在している場合(1)

本文に目次を追加したあと、記事をプレビューしてどのような目次が作成されたのかを確認してみます。

大見出しや中見出しが混在している場合(2)

大見出しや中見出しが混在している場合(3)

目次が階層構造で表示されました。

-- --

見出しから目次を自動で作成する手順について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。