自分は普段、ページに目次を表示させる場合は、プラグイン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を追記します。

【追加CSS】

.vk_tableOfContents-style-default{
padding: 5px;
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 Blocks Pro用です

以上、備忘録でした。

H2見出し

H3見出し

H2見出し

H3見出し

4見出し

4見出し

H2見出し