【WordPress】目次の先頭にある番号を消す方法

WordPressで見出しを使った時に作成される「目次」をカスタマイズする方法を解説します。
今回は、目次の先頭にある番号を消す方法の解説になります。

はじめに

本記事では、特定の記事にある目次をカスタマイズする方法を説明します。
目次をカスタマイズするには「toc」タグのプロパティ値を変更します。

下記は何もカスタマイズを施していない、デフォルトの目次の状態です。
＊デフォルト状態ですが、WordPressで使用しているテーマやスキンでデザインが画像と異なります。

目次の見出し2[H2]から番号を消す方法です。

見出し2[H2]以降にある通常の番号を消す場合は、以下のコードを適用します。

.toc li {
    list-style-type: none;
}

見出し2[H2]のみの通常の番号を消す場合は、以下のコードを適用します。

.toc li {
    list-style-type: none;
}
.toc li li {
    list-style-type: decimal;
}

使用しているテーマやスキンでは、元から番号が消されており、見た目が変更された番号に置き換えられている場合があります。
その場合は、以下のコードを適用することで、番号を表示させることが可能です。

.toc li {
    list-style-type: decimal;
}

上記を適用すると、下記のように通常の番号と見た目がカスタマイズされた番号の両方が表示されてしまいます。

テーマやスキンで作成されている番号を消して、普通の番号に変更するには、以下のコードを適用します。

.toc li {
    list-style-type: decimal;
}
.toc ol.toc-list>li:before {
    display: none;
}

上記を適用すると、下記のようになります。

リンク

目次の見出し3[H3]から番号を消す方法です。

見出し3[H3]以降にある通常の番号を消す場合は、以下のコードを適用します。

.toc li li {
    list-style-type: none;
}

見出し3[H3]のみの通常の番号を消す場合は、以下のコードを適用します。

.toc li li {
    list-style-type: none;
}
.toc li li li {
    list-style-type: decimal;
}