CSSで目次をカスタマイズしてみる – WordPress【 Luxeritas 】ルクセリタス

wordpress テーマルクセリタスの目次ですが、デフォルトでは
見出しごとにナンバーリングされるスタイルです。

例えば、この図のように見出し４まで表示したい場合などは 1.1.1. と数字で表示されます。

分かりやすいといえばとても分かりやすいのですが、
個人的にもっとシンプルにしてみたいと思ったので、ちょっとカスタマイズしてみたいと思います。

また、初心者の方向けに基本的な目次の設定方法から分かりやすく解説していきます。

contents - 目次 -

1. 目次の基本設定について
- 1.1. 記事ごとの目次の表示設定
2. 目次のカスタマイズ
3. その他のカスタマイズ
- 3.1. リンクのカスタマイズ – 色とアンダーラインを消す
- 3.2. 開閉ボタンの非表示

目次の基本設定について

投稿記事に目次を表示させるかどうか　または　表示させる際の設定を外観カスタマイズから行います。
外観カスタマイズで設定できる項目はこちら

➊ 開閉設定開始時に開いた状態にするか、手動で開いていただくか設定

❷ 目次のタイトルと開・閉のボタンの名前を設定

❸ 文字幅に合わせて目次枠を変動（自動）か、固定の設定

➍ ➎ で設定した見出し２の数を満たした場合、目次が自動で挿入される設定

➎ 記事内の見出し２の数で目次の表示を設定

➏ 固定ページで目次を表示したくない場合など、目次を設定できます。

➐ 目次に表示させる見出しの階層を設定

そのほか、目次の開始状態・タイトル名の設定・カラー設定などがあります。

注意

CSSでカスタマイズをしていく場合、カラー設定は
重複する項目ですのでどちらか一方に記述するようにします。

記事ごとの目次の表示設定

投稿作成画面に目次の非表示というボックスがあります。
例えば、H２タイトル３タイトルから目次の設定をしていたとしても記事によって非表示にすることができます。

これを使えることで、基本設定の ➎ ➏ ➐ の設定の基準も変わってきますね。

目次のカスタマイズ

今回はコンテンツ内の目次とサイドウィジェットに表示する目次を
こんなイメージの目次にカスタマイズしていきます。

主に4つの項目が CSSカスタマイズのポイントになります。

目次の外観のカスタマイズ
数字部分の表示変更
サイドウィジェットの目次カスタマイズ
その他のカスタマイズ

コンテンツ内の目次 – CSSカスタマイズ

まずは、メインの外観のデザインとリストの文字設定から

/*目次デザイン*/
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
/* 目次 */</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
＃toc_container、.toc_widget {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
最大幅：100％;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
フォントサイズ：14px;</span></span>
}

/*目次の枠とタイトル*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#toc_container {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
表示：テーブル;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
マージンボトム：10px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
パディング：10px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：#fff;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-weight：bold;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
背景：＃a4d5bd;</span></span>
}

/*見出しの文字色*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#toc_container a {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃333;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*見出し３ - Font */<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list read read {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-size：14px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-weight：normal;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>
/*見出し４ - Font */<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list li li li a {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-size：13px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*リストの行間*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
line-height：1;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
padding-top：15px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*目次デザイン*/

/* 目次 */

＃toc_container、.toc_widget {

最大幅：100％;

フォントサイズ：14px;

}

/*目次の枠とタイトル*/

#toc_container {

表示：テーブル;

マージンボトム：10px;

パディング：10px;

色：#fff;

font-weight：bold;

背景：＃a4d5bd;

}

/*見出しの文字色*/

#toc_container a {

色：＃333;

}

/*見出し３ - Font */

.toc_list read read {

font-size：14px;

font-weight：normal;

}

/*見出し４ - Font */

.toc_list li li li a {

font-size：13px;

}

/*リストの行間*/

.toc_list li {

line-height：1;

padding-top：15px;

}

リストの背景を白抜きに

今回のカスタマイズでは、記事内で使用するリストの CSSと組み合わせています。

<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">。ポスト{</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：#ddd;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
背景：#fff;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
パディング：0.5em 1.5em;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

。ポスト{

色：#ddd;

背景：#fff;

パディング：0.5em 1.5em;

}

これで目次画面を白抜きにしています。

目次の数字部分を CSSカスタマイズ

次に、目次の数字を変更する CSSです。
見出し２には数字を３・４には FontAwesome のアイコンを使用します。

/*目次の番号表示変更*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_number {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
表示：なし;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*見出し２の設定*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#toc_container> .toc_list {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
カウンターリセット：my-counter;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
リストスタイル：なし;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
margin-bottom：0！important;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
パディング：0 0 0 30px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*見出し２に数字*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#toc_container> .toc_list> li：before {</span></span>
content: counter(my-counter);/*連番を進める*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
カウンターインクリメント：my-counter;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃57697f;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
表示ブロック;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
フロート：左;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
マージン左：-30px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
text-align：center;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
幅：30px;</span></span>
}

/*見出し３ ４ の設定*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list li li：before {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-family：FontAwesome;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
コンテンツ： "\ f105";</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃a4d5bd;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-weight：900;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
margin-right：5px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>
/*見出し３ ４ - 位置調整*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list li li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
マージン左：-30px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
line-height：1;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_list li li li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
マージン左：-10px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
padding-top：15px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
line-height：0;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*目次の番号表示変更*/

.toc_number {

表示：なし;

}

/*見出し２の設定*/

#toc_container> .toc_list {

カウンターリセット：my-counter;

リストスタイル：なし;

margin-bottom：0！important;

パディング：0 0 0 30px;

}

/*見出し２に数字*/

#toc_container> .toc_list> li：before {

content: counter(my-counter);/*連番を進める*/

カウンターインクリメント：my-counter;

色：＃57697f;

表示ブロック;

フロート：左;

マージン左：-30px;

text-align：center;

幅：30px;

}

/*見出し３４の設定*/

.toc_list li li：before {

font-family：FontAwesome;

コンテンツ： "\ f105";

色：＃a4d5bd;

font-weight：900;

margin-right：5px;

}

/*見出し３４ - 位置調整*/

.toc_list li li {

マージン左：-30px;

line-height：1;

}

.toc_list li li li {

マージン左：-10px;

padding-top：15px;

line-height：0;

}

応用で見出し２に FontAwesome を使うこともできます。

目次に合いそうな FontAwesome

参考までに、目次に FontAwesome のアイコンをいくつかあげてみました。

アスタリスク f069
マイナスサークルf056
ディアスポラf791
ハートf004
シェブロン-サークル-右f138
スクエアf0c8
スターf005
ストップサークルf28d
バンドキャンプ f2d5

FontAwesome がうまく表示されない場合の Check Point　!!

１．FontAwesome の表記のしかた
font-family: FontAwesome の部分で“FontAwesome"や “Font Awesome 5 Free” などと表記するケースがあります。

FontAwesome で正しく表記されない場合は別の表記で試してみてください。

2. ルクセリタスでのアイコンフォントの設定

ルクセリタスのカスタマイズ画面で FontAwesome の設定画面があります。
こちらのバージョンがあってない場合がありますので、設定を変えてみてください。

３．FontAwesome のプラグインをインストールしていない方
プラグインから FontAwesomeを検索しインストールすると使用できるようになります。

サイドウィジェット – 目次カスタマイズ

サイドバーに目次を設定した場合の CSSカスタマイズです。
こちらはコンテンツ内の CSS と連動していますので
.toc_number{ display: none; } と設定している前提の CSSコードになります。

サイドバーで目次を表示させる場合は、ウィジェットの設定画面で
表示させたい場所に目次のウィジェットを設定してください。

/* サイドバー・ウィジェットの目次*/
/* 見出し2 */<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_widget> .toc_list { </span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
カウンターリセット：my-counter;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
margin-bottom：0！important;</span></span>
}

/*目次 - 背景と余白*/ <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side .toc_list { </span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
背景：＃f0e68c; </span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
パディング：5px 10px; </span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/* 見出し２に数字を指定 */<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_widget> .toc_list> li：before { </span></span>
content: counter(my-counter);/*連番を進める*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
カウンターインクリメント：my-counter;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃696;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
表示ブロック;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
フロート：左;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
幅：20px;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*サイドバー目次 -見出し２- 文字設定*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side .toc_list li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-size：1.2em;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-weight：bold;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*サイドバー目次 - 見出し３ ４ */<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side ul.toc_list li li：before { </span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃333;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
コンテンツ： '・';</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side .toc_list li li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
font-size：1em;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*見出し３ ４ - 位置*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side .toc_list li li li li li {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
行の高さ：1.2;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
マージン左：0;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/* サイドバー・ウィジェットの目次*/

/* 見出し2 */

.toc_widget> .toc_list {

カウンターリセット：my-counter;

margin-bottom：0！important;

}

/*目次 - 背景と余白*/

#side .toc_list {

背景：＃f0e68c;

パディング：5px 10px;

}

/* 見出し２に数字を指定 */

.toc_widget> .toc_list> li：before {

content: counter(my-counter);/*連番を進める*/

カウンターインクリメント：my-counter;

色：＃696;

表示ブロック;

フロート：左;

幅：20px;

}

/*サイドバー目次 -見出し２- 文字設定*/

#side .toc_list li {

font-size：1.2em;

font-weight：bold;

}

/*サイドバー目次 - 見出し３４ */

#side ul.toc_list li li：before {

色：＃333;

コンテンツ： '・';

}

#side .toc_list li li {

font-size：1em;

}

/*見出し３４ - 位置*/

#side .toc_list li li li li li {

行の高さ：1.2;

マージン左：0;

}

ここでは見出し３４のマークをアイコンではなく記号を使用しました。
記号は +　-　＊など、" " で囲むことで表記させることができます。

その他のカスタマイズ

最後にそのほかの詳細なカスタマイズをご紹介します。

リンクのカスタマイズ – 色とアンダーラインを消す

/*リンク色とアンダーライン*/
/*コンテンツ内*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#toc_container a：hover {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃6969;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
テキスト装飾：なし;</span></span>
}
/*サイドウィジェット*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
#side .widget a：hover {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
色：＃6969;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
テキスト装飾：なし;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*リンク色とアンダーライン*/

/*コンテンツ内*/

#toc_container a：hover {

色：＃6969;

テキスト装飾：なし;

}

/*サイドウィジェット*/

#side .widget a：hover {

色：＃6969;

テキスト装飾：なし;

}

開閉ボタンの非表示

開閉ボタンが不要な場合、こちらを追記します。

/*開閉ボタンの非表示*/<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
.toc_toggle {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
表示：なし;</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

/*開閉ボタンの非表示*/

.toc_toggle {

表示：なし;

}

ルクセリタスまたは wordpress のバージョンによって、表示が崩れてしまうケースもあります。

指定したサイズが合わなかったり、ほかで指定したCSSカスタマイズと重複して記述しているケースがあったり
バージョンによって使える機能が変わってきますので、どれが原因かは特定しかねますが
今回、子テーマ luxech- 3.0.0 / 3.0.3 ・親テーマ Luxeritas 3.9.0 より以前のバージョンでもチェックしてみたところ特に問題なく表示できましたので
もし、上手く表示されない場合はので同じ項目のカスタマイズをチェックしてみてください。

以上、WordPress【 Luxeritas 】ルクセリタス – 目次のカスタマイズでした。

2021-10-13外観 & CSSカスタマイズdesing,Font Awesome,Luxeritas