【SANGOカスタマイズしてみた】目次のデザインを可愛くしてみた

/*--------------------------------------
  目次　変更
--------------------------------------*/
#toc_container {/*目次全体*/
    margin: 0 0 2em 0;/*外側の余白設定*/
    padding: 0;/*内側の余白を0に*/
    border-color: #4242428a!important;/*枠線の色*/
    border: solid 2px;/*枠線の種類と幅*/
    border-top: none;/*上線削除*/
    border-radius: 3px;/*角をちょっとだけ丸く*/
    background: #4242420d;/*背景色*/
    box-shadow: none;/*影を削除*/
}
div#toc_container .toc_list:after {/*右下のアイコン*/
    content: "\f212";/*アイコンの書類*/
    position: absolute;/*自由に羽ばたけるように*/
    font-family: FontAwesome;
    bottom: -20px;/*下方向の位置調整*/
    right: 5%;/*右方向の位置調整*/
    font-size: 5em;/*アイコンの大きさ*/
    opacity: 0.1;/*透明度*/
}
#toc_container .toc_title {/*目次のタイトル*/
    display: block;/*段落に*/
    margin: 0;/*外側の余白を削除*/
    padding: 0;/*内側の余白を削除*/
    font-size: 18px;/*文字の大きさ*/
    line-height: 42px;/*行の高さ*/
    font-weight: bold;/*太文字*/
    background: #4242428a;/*背景色*/
    text-align: center;/*中央揃え*/
    color: white!important;/*文字の色*/
}
#toc_container .toc_title:before {/*タイトル前のアイコン*/
    display: none;/*消し消し*/
}
#toc_container .toc_list {/*目次のコンテンツ*/
    margin: 0;/*外側の余白削除*/
    color: #424242de;/*文字の色*/
    padding: 1em 6% 1em 10%;/*内側の余白調整*/
    position: relative;/*基準に設定*/
}
#toc_container .toc_list li a {/*アンカーリンクの設定*/
    color: #424242b3;/*文字色*/
    display: block;/*横いっぱいまでリンクにする*/
}
#toc_container .toc_list li a:hover {/*マウスホバーしたとき*/
    text-decoration: none;/*下線を表示しない*/
    opacity: .5;/*うっすら透明に*/
}
#toc_container ul {/*箇条書き*/
    list-style-type: decimal;/*番号に変更*/
    color: #424242b3!important;/*文字の色*/
}
@media only screen and (min-width: 481px){/*PC表示*/
#toc_container {
    padding: 0;/*内側の余白を削除*/
}}

/*--------------------------------------
  目次　変更
--------------------------------------*/
#toc_container {
    margin: 0 0 2em 0;
    padding: 0;
    border-color: #4242428a!important;
    border: solid 2px;
    border-top: none;
    border-radius: 3px;
    background: #4242420d;
    box-shadow: none;
}
div#toc_container .toc_list:after {
    content: "\f212";
    position: absolute;
    font-family: FontAwesome;
    bottom: -20px;
    right: 5%;
    font-size: 5em;
    opacity: 0.1;
}
#toc_container .toc_title {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 42px;
    font-weight: bold;
    background: #4242428a;
    text-align: center;
    color: white!important;
}
#toc_container .toc_title:before {
    display: none;
}
#toc_container .toc_list {
    margin: 0;
    color: #424242de;
    padding: 1em 6% 1em 10%;
    position: relative;
}
#toc_container .toc_list li a {
    color: #424242b3;
    display: block;
}
#toc_container .toc_list li a:hover {
    text-decoration: none;
    opacity: .5;
}
#toc_container ul {
    list-style-type: decimal;
    color: #424242b3!important;
}
@media only screen and (min-width: 481px){
#toc_container {
    padding: 0;
}}