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

「Rich Table of Contents」

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

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

初期デザイン

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

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

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

枠のサンプル

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

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

• タイトル
• テキスト
• 背景
• 枠線
• 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 ;
}
/*H3前の装飾　位置調整*/.rtoc-mokuji-content .rtoc-mokuji.decimal_ol .level-2 li::before {
top: 1px ;
}