WordPressの目次のナンバリングを非表示にする方法

2025年2月7日

Luxeritasテーマをカスタマイズして、目次のナンバリングを消してみました！見出しの前に表示される数字を取り除くことで、特にスマートフォンでの見やすさが格段に向上。コードを少し追記するだけで、簡単にスッキリしたデザインに仕上げられました！

1. Luxeritasは目次のナンバリングを消したい
2. うざい目次のナンバリングを消す方法

Luxeritasは目次のナンバリングを消したい

私の愛用している「Luxeritas」は高速表示&使いやすさでお気に入りのテーマですが、目次のナンバリングがややうざい。

ナンバリングの表示・非表示を1クリックで出来るテーマもあるようですが、Luxeritasの場合多分できない。。。。。

で、調べてみると「style.css」にちょっと記述するだけで出来るとのことなのでやってみました。

うざい目次のナンバリングを消す方法

「子テーマの編集」→「style.css」、または「カスタマイズ」→「追加CSS」に以下を記述します。

/* 目次のナンバリング（番号）を非表示にする */
.toc_number {
display: none; /* 目次内の番号をページ上に表示しない */
}

「style.css」と「追加CSS」のどちらに入れることも出来ますが、違いはなんなのかをChatGPTに聞いてみました。

1. 追加CSS：

場所: WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」で設定できます。

使い方: サイトのCSSを手軽に追加・変更できる場所です。この方法では、テーマのファイルを直接編集せずにCSSを追加できます。

メリット:
テーマの更新後も変更が残る。
テーマファイルを直接触らずに変更できるので、安全。
プラグインやテーマの設定に影響されず、カスタマイズが簡単。

デメリット:
複雑なスタイル調整や管理には不向きな場合がある。
追加CSSとしての変更なので、あまり大規模な修正には向いていません。

2. style.css：

場所: WordPressテーマのファイル「style.css」に書きます。テーマエディターを使って直接編集します。

使い方: テーマのスタイルシートに直接書き込むことで、デザインを変更します。

メリット:
より複雑なカスタマイズに対応できる。
テーマ全体のデザインに関連するCSSコードを一括で管理できる。

デメリット:
テーマが更新されると、追加したコードが上書きされる可能性がある（特に親テーマの場合）。
間違って他のコードを変更すると、予期しない不具合が生じることがある。
バックアップを取らないと、テーマの変更後に元に戻すのが難しい場合がある。

どちらを使うべきか？：

安全に簡単な変更をしたい場合は、**「追加CSS」**がオススメです。特にテーマの更新後も変更が反映されるので、安心して使えます。

テーマの根本的なカスタマイズや大規模な変更をしたい場合は、「style.css」を使うほうが柔軟に管理できますが、テーマ更新時に変更が失われないように子テーマを使うことをオススメします。

「追加CSS」は手軽で安全な方法なので、まずはそちらで試してみるのが良いでしょう。