Luxeritasの目次をカスタマイズ！好みのフォントやナンバー削除！CSSの追加作業

Luxeritasは目次を挿入できます。

目次のカスタマイズは開閉やフォント・背景や罫線の色を変更できます。

もう少しカスタマイズしたいと思いませんか？

Luxeritasのスタイルを使った目次でも良いですが…

Luxeritasのブログはほとんど皆同じ。

目次の背景色を変えたり文字の色は変えられても…

目次の全体的な見え方は同じですね？

自分の好みの目次表示に変えてみましょう。

この記事の内容

Luxeritasの目次
Luxeritasの目次のCSSコード
Luxeritasの目次のカスタマイズ

Contents

1. Luxeritasの目次
- 1.1. Luxeritasの目次のCSS
2. Luxeritas目次のカスタマイズ
- 2.1. 目次のカスタマイズ用CSS
- 2.2. 変更できなかった点
3. Luxeritas目次のカスタマイズまとめ

Luxeritasの目次

Luxeritasの目次は

カスタマイズ（外観）で変更する事ができます。

Luxeritas→カスタマイズ（外観）→目次

ここでカスタマイズできる項目は

文字・罫線・背景・ボタンの色などが変更できます。

CSSでカスタマイズすれば
↓
開閉ボタンの削除
通しナンバーの削除
目次ボックスのデザイン

などなど…色々なカスタマイズができますね。

Luxeritasの目次のCSS

Luxeritasの目次のオリジナルのCSSを変更して子テーマのCSSに追加します。

まずはLuxeritasの目次のCSSを見てみましょう。

/* Table of Contents */
#toc_container, .toc_widget {
max-width: 100%;
font-size: 13px; font-size: 1.3rem;
}
#toc_container {
display: table;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
color: #333;
background: #fafafa;
}
#toc_container a {
color: #333;
text-decoration: none;
}
#toc_container a:hover {
text-decoration: underline;
}
.toc_toggle {
white-space: nowrap;
}
.toc_list {
margin: 0;
padding: 0;
}
ul.toc_list {
padding: 0 10px;
}
.widget ul.toc_list {
padding: 0 5px;
}
.toc_list ul {
padding: 0 0 0 15px;
}
.toc_list li {
padding: 2px;
list-style: none;
}

オリジナルのCSSコードをコピーして変更したい場所を書き換えれば反映します。

Luxeritas目次のカスタマイズ

上記のオリジナルコードを変更したい部分だけ抜き取ります。

目次のカスタマイズで変更した箇所
↓
通しナンバーをアイコンに
見出しごとに罫線の挿入

凝れば他にも手を加えたいところですが…

当ブログはシンプルに差別化したかっただけですので大げさな事はしません。

目次のCSSコードを見ると…

目次だけのホバー色なども変更できますが…

今回は全体の色合いに合わせました。

最も変更したかった点
↓
目次の開閉ボタンの削除

目次の開閉は必要ないと判断しました。

自分がブログを見ても目次を開閉する事は皆無です。

目次が閉じていても開く事はありません。

閉じる事ができても閉じる事はしません。

目次のカスタマイズ用CSS

目次部分の変更箇所のCSSを書き留めておきます。

#toc_container .toc_title {
text-align: center;
border-bottom: solid 2px #57697f;
font-size: 17px;
font-weight: bold;
color: #57697f
}
.toc_list li {
padding: 2px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px #57697f;
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
position: absolute;
left : 0em;
color: #57697f;
}
.toc_list li:last-of-type {
border-bottom: none;
}
#toc_container a:hover {
color: #87a0bc;
}
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}

コピーしても使用できますが、半角英字など確認してください。

※不必要な物・コードの書き方など不備があるかもしれませんのでご了承ください。

Font Awesomeの部分で□に表示される…

アイコンが表示されない時
↓
font-weight: 900;を挿入

CSS内でFont Awesomeを使用する際、

font-weight: 900;を記入しないとアイコンが表示されないそうです。