目次のスタイル

このテーマはなるべくプレーン（余計なスタイリングをしていない）というコンセプトのため、デフォルトでは目次は一切スタイルしていません。目次のような他との兼ね合いがない部分は特にカスタマイズしやすいため、ネットで検索すれば色々なデザインのカスタマイズCSSがでてきます。それらを参考に好きな目次を作ってください。

基本的なスタンスは自分でカスタマイズしてもらうということですが、デフォルトのままだとあまりにも目次なんだか何だかわからないただの箇条書きになってしまうので、一応こちらでもスタイルを用意しました。よければ使ってください。
こんなのです↓

この目次を使うには以下のコードをデザインCSSに貼ってください。（貼り方）

/*目次*/
ul.table-of-contents
 {background:#eee;padding:1em;}
ul.table-of-contents::before
 {content:"目次";font-weight:bolder;display:block;}
ul.table-of-contents a
 {text-decoration:none;color:#505050;}
ul.table-of-contents a:hover
 {color:#111;}
ul.table-of-contents li
 {display:block;line-height:3em;font-size:80%;}
ul.table-of-contents > li
 {padding-left:1.5em;}
ul.table-of-contents li ul
 {padding-left:0.5em;}
ul.table-of-contents li li
 {display:block;line-height:2em;margin-left:1em;}
ul.table-of-contents li::before
 {content:"・";}

@media (max-width: 767px) {
 ul.table-of-contents{width:80vw;margin:0 auto;}
 div.indexalt2 ul.table-of-contents > li {padding-left:1em;}}}
/*---/---目次*/

もしくはこんなかんじのも用意しました↓

こっちの目次を使うには以下のコードをデザインCSSに貼ってください。

/*目次*/
div.indexalt2 ul.table-of-contents
 {background:#eee;padding:1em;}
div.indexalt2 ul.table-of-contents::before
 {content:"目次";font-weight:bolder;}
div.indexalt2 ul.table-of-contents a
 {text-decoration:none;color:#505050;}
div.indexalt2 ul.table-of-contents a:hover
 {color:#111;}
div.indexalt2 ul.table-of-contents li
 {display:block;line-height:3em;}
div.indexalt2 ul.table-of-contents > li
 {padding-left:1.5em;}
div.indexalt2 ul.table-of-contents li ul
 {padding-left:0.5em;}
div.indexalt2 ul.table-of-contents li li
 {line-height:2em;margin-left:1em;}
div.indexalt2 ul.table-of-contents li::before
 {content:none;}
div.indexalt2 ul.table-of-contents li li::before
 {content:"・";}
div.indexalt2 ul.table-of-contents > li > a
 {display:inline-block;border-left:solid 0.3em #505050;line-height:1.4em;padding-left:0.4em;margin-left:0.3em;}
div.indexalt2 ul.table-of-contents li li a
 {border:none;padding-left:0;margin-left:0;}

@media (max-width: 767px) {
 ul.table-of-contents{width:80vw;margin:0 auto;}
 div.indexalt2 ul.table-of-contents > li {padding-left:1em;}}}
/*---/---目次*/

大見出しのサンプル１

中見出しのサンプル１

小見出しのサンプル１

大見出しのサンプル２

中見出しのサンプル２

大見出しのサンプル３

小見出しのサンプル２