
記事の目次に階層を作る方法
こんにちは!(仮)です😄
今回は、記事の中で目次に階層をつけてみたいと思います!
これもですね、他の方のブログ見てると見易いですし調べてやってみました!
なんせ私も初心者なので、自分への備忘録として(笑)
今回もWordPressのテーマはCocoonを使用してます。
初めてのホームページ作成なら、ホームページ.com!初期費オール0円キャンペーン実施中
(PR)
目次の階層って何?
そもそも、目次の階層ってなに?最初分かりませんよね(笑)
という方もいると思いますので、 階層について説明します!
目次の階層というのは簡単にいうと、目次の中でグループを作るということです。
階層を作った(グループ化した)目次が下の写真になります。

上の図で見ますと、「1.Twitterの。。。」から枝分かれして、
「Twitter運用。。。」から 「相互フォロー。。。」 へと階層が出来ました。
見出しから、サブ見出し、そこから更にサブ見出しが出来、
目次でクリック出来るので、それぞれの記事へ飛びやすくなります😄
これがグループ化、目次の階層になります。

(PR)
まずは目次を作りましょう!
まずは見出し!(階層の一番上)、通常の目次の作り方を紹介します。
目次は、見出しを作ることで出来ますので方法はとっても簡単です😄
ブロックのプラスボタンをクリックするとメニューが出るので「見出し」をクリック
これで見出しの完成!
目次にしたい文字を入力です! すると入力した文字の表示が変わります。
作った見出しに文字を入力すると、(見出し)から(見出し)の様に
太文字表示になります。
下書き保存して、プレビューで確認してみて下さいね

見出しには色もつけれます。
記事編集画面の右を見ていただくと、投稿とブロックのメニューがあります。
色をクリックすると、色選択が出ますのでこれで完成です😄


(PR)
目次の階層の作り方
それでは続いて、目次の階層を作っていきます!
目次の階層の作り方は、先程やりました目次の作り方とほとんど同じです。
先ほどと同じように「見出し」を作成します。
まずは、階層を作りたい目次名を入力して下さいね。

続いて、見出しに変更した目次名にカーソルを合わせて、
普通の見出しはH2なので「見出しレベルを変更」をクリックします。
すると、H1~H6まで表示されたウインドウが出てきます。(下記参照)
因みに、H1はブログ名。H2は現在の目次の見出しレベルです。
今回は、目次に階層を作り、グループ化したいので、
現在の目次の見出しより一つ下の「H3」をクリックします。

そうすると、見出しレベルが一つ下がった見出しが作成できます。
見出しレベルH3に変更すると、上の画像の様に表示が変わっていると思います。
見出しの頭が変わります。下書き保存の上、プレビューを確認してみましょう!
「新しいタブでプレビュー」を選択すると、実際の公開画面で確認ができます。
これで目次の階層、グループ化が作成できました!
さらに階層を掘り下げたいときは、H4やH5と選択していけば、
階層を増やすことが可能です。
あまり階層を増やしすぎると、読みにくくなる場合もあるので
バランスを見て作成したくださいね😄

(PR)
(PR)