WordPressで目次を作る方法

Cocoon

※テーマはCocoonを使っています

目次は自動で作成される

短い記事などではあまり必要ないかもしれませんが長い記事とかだと目次が無いと目的の文章に辿り着けなかったりして読みづらく感じてしまいます
目次があって尚且つリンクも貼ってあったらとても便利ですよね

でも目次を作るのって面倒そう、難しいのではないかなと思っていませんか?

ハードルが高そうな感じですが、WordPressなら見出しを上手く使えば簡単にしかも自動で目次ができてしまうのです

目次を作ってみよう

それでは目次を作っていきましょう

WordPressでは見出しが2つ以上あると自動で目次を作ってくれます
また、目次をさらに小分けする事も可能です(階層を作る)
まずは目次を作ってみましょう

「目次は自動で作成される」と言う見出しを作ります
この記事で使っている見出しですね
文字を入力したら↓この様な画面になります


次に段落を選びます↓


↓このような画面になるので見出しを選択


これで見出しが出来ました
標準のままの設定ですとこんな感じになります↓


見出しを2つ作ると↓こんな感じに自動で目次が作られます
簡単ですね~

目次をさらに細分化してみる(階層を作る)

「3.目次をさらに細分化してみる」の下にこんな感じ↓で目次を作りましょう

見本なのでクリックできません

見出しの下に見出しを作る

大きな見出し「目次をさらに細分化してみる」の記事の次に↓このように先ほどと同じ方法で見出しを作ります

見出しのスタイルを変える

そのままだと大きい見出しと区別をつけにくいのでスタイルを変更しましょう

画面の右側に↓スタイルと言う項目があります

今回は二重線 上下線に変更しましょう↓

この様に変更されました↓
大きい見出しと違うスタイルなのでわかりやすいですね

見出しの字の大きさを変える

見た目の違う見出しが出来ましたが、このままで普通の目次が一つ増えるだけです
目次を細分化させるために見出しの大きさを変更しましょう

見出しを作ると基本設定ではH2になっています↓

これをH3に変更しましょう↓


これでOKです↓

もう一つ下の階層を作りましょう

さらに下の階層を作りたいのなら、今までと同じように見出しを作り見出しレベルをH4に変えるだけです
ひとつ前の階層より一つ大きい数字に変えていけば良いのです
こんな感じ↓

こんな風になります

こうやって見出しを作った結果、この記事の目次が自動作成されました
↓こんな感じになります(これは画像です)

実際の目次はこの記事の一番上にあります

一度やり方を覚えてしまえば後は簡単です
目次を上手く活用して読みやすい記事を書きましょう

PAGE TOP
タイトルとURLをコピーしました