“WordPress”目次をカスタマイズ

目次を下図のようにカスタマイズ。WordPressにテーマはCooon。

カスタマイズ

Cocoon設定

Cocoon設定は下記の通り

目次設定で目次表示の深さを「H3みだしまで」に設定。

 

CSSでカスタマイズ

以下のCSSコードをCocoon子テーマのstyle.cssに追加。

/**********************
**目次のカスタマイズ
***********************/
/*タイトル文字の太さ色*/
.toc-title{
position: relative;
padding: 5px 0px;
background: #35477e;/**背景色**/
color: #fff;
font-weight: bold;
}
/*背景色、枠線*/
.toc {
background: #f4f5f7;
border: 1px solid #516ab6;
}
/*文字の色と大きさ*/
.toc a {
color: #0693cd;
font-size: 16px;
}
/*H3の目次番号を消す*/
.article .toc-list > li li {
list-style: none;
}
/*H3の目次番号を点にする*/
.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -15px;
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
/*H3の文字を小さく*/
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}

tocは”Table of contents”の略で目次の意味。見出しをカスタマイズするときは、先頭に.tocを付ける。

.toc-titleは目次タイトルで、目次［閉じる］と表示されている部分。タイトル文字の太さ色及び背景色をカスタマイズ。

 .toc-title{
position: relative;
padding: 5px 0px;
background: #35477e;/**背景色**/
color: #fff;
font-weight: bold;
}

.tocだけの場合は目次のエリアが指定される。枠線と背景色をカスタマイズ。

.toc {
background: #f4f5f7;
border: 1px solid #516ab6;
}

.toc aは目次に使用されている文字。目次の文字色とサイズをカスタマイズ。

.toc a {
color: #0693cd;
font-size: 16px;
}

.toc-listは見出しのこと。

最初にH3見出しのデフォルト設定を消す。

.article .toc-list > li li {
list-style: none;
}

次にH3の目次番号を点にする。

.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -15px;
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}

最後にH3見出しの文字を小さくして色を変える。

.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}

“background”は背景色。”color”は文字色。後に続くカラーコードで色が変えられる。

“font-weight”は文の太さ。”font-size”は文字の大きさ。数字がそれぞれの太さ、大きさを表している。

“border”は線の事。太さ、線種、色が変えられる。

これ以外は余白などの配置を設定するコード。

自分の好みで設定してみて下さい。