目次のカスタマイズをすると、サイドバーに表示した時の目次デザインもカスタマイズされるのでカテゴリーなどの兼ね合いもありますし、その辺にあうようなデザインにカスタマイズしました。
目次のデザインをカスタマイズ
個人的に目次が小さくて見づらいなと感じていたのですが、そもそも目次は本編じゃないから不要説もありますし、どちらがいいのかはわかりません。だけど、入れるなら見やすくしときたいですよね。
#toc, .toc {
margin: 0 auto;
padding:0.75rem 1rem;
width: 60%;
}
@media screen and (max-width:480px) {
#toc, .toc {
width: 90%;
}
}
.sidebar-sroll #toc, .toc{
margin: 0 auto;
width: 100%;
}
.toc-title{
font-size: 1.2rem;
background-color: #767376;
color: #ffffff;
}
.toc-title:before{
font-family: "Font Awesome 5 Free";
content:"\f0ca";
font-weight:800;
color:#ffffff;
font-size: 1.2rem;
margin-right: 6px;
}
.toc-list ul,.toc .toc-list ol{
padding: 0.3rem 1rem;
font-size: 0.95rem;
}
.toc-list > li {
border-bottom:1px dotted #767376;
padding: 0.3rem 1rem;
font-size: 1rem;
color: #767376;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content:"\f35a";
color:#767376;
font-weight: 800;
margin-right:6px;/
}
.toc-list li a:hover{
background:transparent;
color:#A1A7A8;
margin-left:1rem;
transition:.4s;
text-decoration:none;
}
.toc-list > li li a {
font-weight: normal;
color: #767376;
margin-top:5;
margin-left:2rem;
text-decoration:none;
}
.toc-list > li li a::before {
font-family: "Font Awesome 5 Free";
content:"\f192";
color:#767376;
font-weight: 800;
margin-right: 6px;
}
.toc-list > li li a:hover{
background:transparent;
color:#A1A7A8;
margin-left:3rem;
transition:.4s;
text-decoration:none;
}幅・上下を広くしてカテゴリーと同じようにカーソルを合わせると動くようにしました。冒頭でも述べた通りですが、基本的にはサイドバーでも同じように表示されるようになるのですが、センターに寄るのでそのへんがイヤな方はCSSにレイアウトを整える系の記述を足せばいいかと。
目次カスタマイズのBefore・After
見栄えがめちゃくちゃ変わります！
メインのBefore・After
Beforeは味気ないというか、なんというか。シンプルといえばシンプルなんですけど、寂しいですよね。
Afterは幅を広げて文字も大きく、Font Awesome 5でカテゴリーと同じように見分けがつきやすくしたので、わかりやすくなったのではないでしょうか。
サイドバーのBefore・After
サイドバーの方が実は気になっていたんですよね。カテゴリーとは全然違うデザインだったので。
カテゴリーと同じデザインになりました。デザインが揃ったのでスッキリです。
ちょっと右寄りなのが気になっていますが、なんでこうなっているのかが特定できてなくて、とりあえずこのままで使います。特定できたらちゃんと修正する予定です。
CHIKA
やる気、でないけどｗｗ
コメント