「賢威8」で目次のレイアウトが崩れる原因と対処法

賢威8を導入して、目次のレイアウトが下の画像のように崩れてしまって困ったことはありませんか?
今回の記事は目次のレイアウト崩れの原因と対処法について書いていきます。

画像:目次のレイアウト崩れのスクリーンショット
目次が崩れている!!

目次を表示させるためには

今回は例として、投稿記事を書く際に「ビジュアル」モードを使う前提で書き進めていきます。

管理画面の左側にある「賢威の設定」の中の「投稿設定」の中でサイト全体の目次設定を決めることができます。記事に必ず目次を入れたい場合は「賢威の設定」の「投稿設定」で目次設定を行っておくと、記事ごとには「デフォルト設定を使用する」で目次が表示されるようになります。

画像:WordPress管理画面の賢威の設定の箇所
WordPress管理画面の左側にある「賢威の設定」の箇所

「賢威の設定」で「目次の表示」を「表示しない」にしている場合は、投稿画面右側の項目「目次の表示」を「表示する」に設定してください。

画像:投稿画面の右側にある「目次の表示」
投稿画面の右側にある「目次の表示」

目次の付け方にはルールがある

まず見出しの付け方になるのですが、「テキストモード」の場合は「<h2>見出し名</h2>」など見出しタグと呼ばれるものを適宜つけていらっしゃると思います。
「ビジュアルモード」で記事を書くときは、下の画像の箇所で見出しをつけているのではないでしょうか。

見出しの付け方にもルールがあります。そのルールが崩壊すると、冒頭の画像のようにレイアウトが崩れる原因となります。

見出しに対する考え方

「SEO的に見出しの順序が〜」と言われることが多いですが、SEO問の観点というより「HTMLの文書構造」という観点からの話のほうがしっくりくる内容になります。

こちらの動画でグーグルのジョン・ミューラー氏が言及しています。

HTMLの文書構造の観点からは、

  1. 最初に見出し1(h1タグ)、賢威は自動的に記事タイトルを見出し1(h1タグ)とします
  2. 見出し2(h2タグ)は見出し1に対するサブセクション
  3. 見出し3(h3タグ)以下見出し6(h6タグ)までは、さらに見出し2(h2タグ)のサブセクション

という考え方の元、賢威ではルール化されていると想像できます。

賢威での正しい見出しの付け方

上記で述べたように、HTML文書構造のもと賢威では見出しの付け方のルール化を策定していると考えられますので、以下のような見出しの付け方が正しい付け方として考えます。

<h2>見出し2</h2>
テキストテキストテキスト
<h3>見出し3</h3>
テキストテキストテキストテキスト
<h4>見出し4</h4>
テキストテキストテキストテキスト
<h3>見出し3</h3>
テキストテキストテキストテキスト
<h4>見出し4</h4>
テキストテキストテキストテキスト
<h2>見出し2</h2>
テキストテキストテキスト
<h3>見出し3</h3>
テキストテキストテキストテキスト

見出し2→見出し3→見出し4→見出し3→見出し4→見出し2→見出し3
のように順序よく付けると見出しのレイアウトが崩れることはありません。

目次レイアウトが崩れてる!と気づいたときの対処法

前述したように「見出しを順序良く付ける」ことが原則ですので、どこかしらの見出しタグの順序が「見出し2→見出し4」のように「見出し3」を飛ばして記述している箇所が存在していると考えられますので、確認して修正しましょう。

目次レイアウトが崩れない例外もあります

短い記事や、賢威の見出しのデザインを使いまわしたいという理由から

<h2>見出し2</h2>
テキストテキストテキスト
<h4>見出し4</h4>
テキストテキストテキストテキスト
<h4>見出し4</h4>
テキストテキストテキストテキスト

とする方がいらっしゃるかもしれません。

見出し2→見出し4→見出し4 としていても目次レイアウトが崩れることはありません。

画像:見出し2→見出し4→見出し4と見出しを付けた例
見出し2→見出し4→見出し4と見出しを付けた例

ただし、HTML文書構造的にはよろしくない書き方となるので、やはりこのような場合でも「見出し2→見出し3→見出し3」としたほうが良いかと思います。

装飾(デザイン)的に「見出し3のデザインを見出し4で使いたいなぁ」と思う方もいらっしゃると思いますが、そのときは「base.css」にclassを任意で追加してデザインを整形するcssを記述して利用することをおすすめします。