【Xeory・Easy Table of Contents】目次をカスタマイズ【いい感じに!】

 

結論:目次プラグインをダウンロードし、以下のコードをお使いください(Xeoryの見た目に合わせました)

 

 

Easy Table of Contents 専用のカスタマイズです↓

(Xeoryのテーマカスタマイズも入っています)

/* */
/* 「xeoryテーマ」カスタマイズ*/
/* */

/* html {
overflow-y: scroll !important;
} */

/* サブタイトル*/

#header > .wrap {
display: flex;
flex-direction: column;
}

#logo {
position: relative;
font-weight: bold;
}

.description {
font-weight: bold;
font-size: 80%;
height: 30px;
}

#header #header-sns ul {
padding: 0px;
}

@media screen and (max-width: 767px) {
.wrap {
margin-left: 15px;
margin-right: 15px;
}
}


/* 投稿画面*/

.post-content h1 {
margin: 0.5em 0;
}

.post-content p, .post-content pre {
margin: 0 0 0.9em;
line-height: 1.9;
}

.ez-toc-widget-container.ez-toc-v2_0_11.ez-toc-widget.counter-hierarchy.counter-decimal {
margin-top: -10px;
border: 8px solid #efefef;
background-color: #fff;
}


/* ホバーカラー*/

.post-title a:hover {
color: #2581c4;
text-decoration: none;
}

a:hover {
color: #2581c4;
text-decoration: none;
}


/* */
/* 「目次プラグイン」のカスタマイズ*/
/* */
span.ez-toc-title {
margin-top: 20px;
margin-left: 10px;
display: inline-block;
}

span.ez-toc-title-toggle {
display: none;
}

/* 目次のコンテナ*/
#ez-toc-container {
border-radius: 0px;
background: #fff;
border: 8px solid #e5e5e5;
box-shadow: none;
}


/* 目次のコンテナ 余白*/
#ez-toc-container{
padding: 20px;
}
#ez-toc-container {
margin-top: 3em;
margin-bottom: 6em;
}
#ez-toc-container > nav {
margin-top: 10px;
}


/* */
/* 目次(サイドバー)*/
/* */

/* スクロールさせる*/
.ez-toc-widget-container.ez-toc-v2_0_11.ez-toc-widget.counter-hierarchy.counter-decimal {
overflow-y: auto;
height: 600px;
}

/* タイトル*/
span.ez-toc-title {
font-weight: bold;
}

.ez-toc-title-container {
margin-bottom: 27px;
}

/* h1フォントの調整*/

ul.ez-toc-list, .ez-toc-list-level-1 {
padding: 0px !important;
padding-left: 10px !important;
}

.ez-toc-heading-level-1 > a {
display: inline-block;
font-weight: bold;
font-size: 20px;
margin-top: 8px;
}

#ez-toc-container ul ul, .ez-toc div.ez-toc-widget-container ul ul {
margin-top: 0.5em;
margin-left: 1em;
}

/* h2フォントの調整*/

.ez-toc-heading-2 {
margin-bottom: 10px;
}

a.ez-toc-link {
display: inline-block;
margin-top: -2px;
margin-bottom: 15px;
}

/* ホバーカラー */

.ez-toc-widget-container, ul.ez-toc-list, li.active::before {
background-color: #fff !important;
}

li.active > a{
display: inline-block;
background-color: #f2f2f2;
}

#ez-toc-container a:visited {
color: #444;
}

#ez-toc-container a:hover {
text-decoration: none;
}

 

ビジュアルはこんな感じになりました↓

 

 

右側の目次の機能はこんな感じ↓

 

・「記事をスクロールしても追従」する

・「今読んでいるところ」が灰色になる

・目次が縦に長すぎるとき、目次をスクロールして読むことができる