Skip to content

Instantly share code, notes, and snippets.

@shigesanpo
Created February 14, 2020 12:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shigesanpo/ca470af2b7e60ef902fa83573870f0da to your computer and use it in GitHub Desktop.
Save shigesanpo/ca470af2b7e60ef902fa83573870f0da to your computer and use it in GitHub Desktop.
/*目次のデザイン変更*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字の大きさ */
font-weight:bold;
list-style-type:decimal; /*数字以外が良ければ変更 */
background:#fff;
border-top:40px solid #65b8a2; /* 「この記事の目次」周りの色 */
border-left:2px solid #65b8a2; /* 線の太さ */
border-right:2px solid #65b8a2;
border-bottom:2px solid #65b8a2;
line-height: 150%; /* 行間 */
border-radius: 3px; /* 角丸にしない場合は不要 */
color:#444; /* 数字(マーク色変更) */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
font-family: 'blogicon';
content: "\f039 この記事の目次";
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -34px;/*上からの位置調整*/
left: 20px; /*左からの位置調整*/
color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
color:#444; /* 目次リスト部分のテキスト色 */
text-decoration:none; /* リンクの下線をつけたくない場合 */
font-size: 90%;/* 文字の大きさを、少しずつ小さくしている */
}
.table-of-contents ul{
font-size: 90%;/* 文字の大きさを、少しずつ小さくしている */
list-style-type: none;/* 箇条書きのマーカーや数字を消す */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment