プラグインVK Blocks Pro「目次ブロック」の修正

自分は普段、ページに目次を表示させる場合は、プラグインTable of Contents Plusを使用しています。ただ、Table of Contents Plusは更新も止まっているようですし、今後は極力プラグインを減らして付属のブロックで済ませたいと考えています。

LightningProやG3 Pro Unit、KATAWARAなどの有料テーマに付属する　プラグインVK Blocks Pro　は高機能なブロックが多く登録されています。

その中の一つに見出しをリスト化して自動で目次を表示する「目次ブロック」があるのですが、デザインが好みでは無いので修正することにしました。

【修正前】

修正前は余白があり過ぎて無駄に大きい気がします？

目次ブロックのクラスを修正して追加CSSに記入してみます。

【修正後】

余白や幅を調節してスッキリさせてみました。先頭の数字を非表示にしました。

目次の初期表示状態はCLOSEを指定しておきます。

カスタマイズ→追加CSS　または（Lightningの場合）VK All in One Expansion Unit →カスタム CSS　に適用させるCSSを追記します。

/*目次ブロックの修正（）*/
.vk_tableOfContents-style-default{
padding: 0 0 0.5em 2em;
width: 70%;
height: 100%;
margin:0 auto;
border: 1px solid #999; 
}
.vk_tableOfContents_list_item {
    list-style: none;
    border-bottom: 1px solid #e5e5e5;
    padding: initial; 
}
.vk_tableOfContents_list_item-h-3 {
    padding-left: 1rem;
}
.vk_tableOfContents_list_item-h-4 {
    padding-left: 2rem;
}
.vk_tableOfContents_list_item_link_preNumber{
	display:none
}

以上、備忘録でした。