スポンサーリンク

WordPress【Cocoon】階層の付いた目次を作ろう!

スポンサーリンク
Wordpress【Cocoon】
スポンサーリンク
スポンサーリンク

記事の目次に階層を作る方法

こんにちは!(仮)です😄

今回は、記事の中で目次に階層をつけてみたいと思います!

これもですね、他の方のブログ見てると見易いですし調べてやってみました!

なんせ私も初心者なので、自分への備忘録として(笑)

今回もWordPressのテーマはCocoonを使用してます。

初めてのホームページ作成なら、ホームページ.com!初期費オール0円キャンペーン実施中

目次の階層って何?

そもそも、目次の階層ってなに?最初分かりませんよね(笑)

という方もいると思いますので、 階層について説明します

目次の階層というのは簡単にいうと、目次の中でグループを作るということです。

階層を作った(グループ化した)目次が下の写真になります。

上の図で見ますと、「1.Twitterの。。。」から枝分かれして、

「Twitter運用。。。」から 「相互フォロー。。。」 へと階層が出来ました。

見出しから、サブ見出し、そこから更にサブ見出しが出来

目次でクリック出来るので、それぞれの記事へ飛びやすくなります😄

これがグループ化、目次の階層になります。

まずは目次を作りましょう!

まずは見出し!(階層の一番上)、通常の目次の作り方を紹介します。

目次は、見出しを作ることで出来ますので方法はとっても簡単です😄

ブロックのプラスボタンをクリックするとメニューが出るので「見出し」をクリック

これで見出しの完成!

目次にしたい文字を入力です! すると入力した文字の表示が変わります。

作った見出しに文字を入力すると、(見出し)から(見出し)の様に

太文字表示になります。

下書き保存して、プレビューで確認してみて下さいね

見出しには色もつけれます。

記事編集画面の右を見ていただくと、投稿とブロックのメニューがあります。

色をクリックすると、色選択が出ますのでこれで完成です😄

目次の階層の作り方

それでは続いて、目次の階層を作っていきます

目次の階層の作り方は、先程やりました目次の作り方とほとんど同じです。

先ほどと同じように「見出し」を作成します。

まずは、階層を作りたい目次名を入力して下さいね。

続いて、見出しに変更した目次名にカーソルを合わせて、

普通の見出しはH2なので「見出しレベルを変更」をクリックします。

すると、H1~H6まで表示されたウインドウが出てきます。(下記参照)

因みに、H1はブログ名。H2は現在の目次の見出しレベルです。

今回は、目次に階層を作り、グループ化したいので

現在の目次の見出しより一つ下の「H3」をクリックします。

そうすると、見出しレベルが一つ下がった見出しが作成できます。

見出しレベルH3に変更すると、上の画像の様に表示が変わっていると思います。

見出しの頭が変わります。下書き保存の上、プレビューを確認してみましょう

「新しいタブでプレビュー」を選択すると、実際の公開画面で確認ができます。

これで目次の階層、グループ化が作成できました!

さらに階層を掘り下げたいときは、H4やH5と選択していけば

階層を増やすことが可能です。

あまり階層を増やしすぎると、読みにくくなる場合もあるので

バランスを見て作成したくださいね😄