目次プラグイン「Rich Table of Contents」のデザインカスタマイズ

「Rich Table of Contents」

日本製で、おしゃれな目次が簡単に設置できるプラグイン「Rich Table of Contents」のデザインカスタマイズ方法についてです。

基本的な使い方は以下をご覧ください。

簡単・おしゃれな目次自動生成プラグイン「Rich Table of Contents」

はじめに 記事内から見出し（<h1>～<h6>）タグを拾い出して自動で目次の生成をしてくれる便利なプラグインは色々ありますが、有名なのは以下の２つです。 Table of Contents Plus Easy Table of Conten...

ayaito.net

初期デザイン

すべてデフォルト設定のままの表示例です。

設定項目から可能なデザイン

枠デザイン・カラーパターン

枠のサンプル

カラーパターンのサンプル

カスタムカラーにする場合は、その下にある「カラー設定」から好きな色を指定できます。設定可能な項目は以下。

• タイトル
• テキスト
• 背景
• 枠線
• H2
• H3
• 目次へ戻るボタン

デザインカスタムCSS

細かく分けていますので、必要な部分をコピーし、色やサイズなどをお好みに変更してご利用下さい。

枠の幅を変える

目次の枠が100%（MAXで700px）に設定されている為、それを変更したい場合

デフォルト

幅変更

CSS

.rtoc-mokuji-content { /*枠*/
max-width:500px;
}

タイトルまわりを変える

CSS

/*タイトル枠*/
.rtoc-mokuji-content #rtoc-mokuji-title {
font-size: 1.5em;
padding: 0.5em;
background: rgba(120, 170, 210,0.4);
border-bottom: solid 3px #78aad2;
border-radius: 9px;
}
/*タイトル文字色*/
.rtoc-mokuji-content #rtoc-mokuji-title span {
color: #fff;
}
/*ボタンの色・文字サイズ・位置調整*/
.rtoc-mokuji-content.rtoc_close #rtoc-mokuji-title .rtoc_open_close,
.rtoc-mokuji-content.rtoc_open #rtoc-mokuji-title .rtoc_open_close {
font-size: 13px;
color: #555;
background-color: #fff;
left: calc(80% + 25px);
padding: 0.5em;
}

文字のサイズを変える

CSS

.rtoc-mokuji-content .rtoc-mokuji.level-1 li {
font-size: 1.2em; /*H2*/
padding: 3px;
}
.rtoc-mokuji-content .rtoc-mokuji.level-2 li {
font-size: 1em; /*H3*/
padding: 3px;
}
.rtoc-mokuji-content .rtoc-mokuji.level-3 li {
font-size: 0.9em; /*H4*/
padding: 3px;
}
/*H2前の装飾　位置調整*/
.rtoc-mokuji-content .decimal_ol > .rtoc-item::after {
top: 9px;
}
.rtoc-mokuji-content .decimal_ol > .rtoc-item::before {
top: 6px !important;
}
/*H3前の装飾　位置調整*/
.rtoc-mokuji-content .rtoc-mokuji.decimal_ol .level-2 li::before {
top: 1px !important;
}