目次プラグイン「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 !important;
}
/*H3前の装飾 位置調整*/
.rtoc-mokuji-content .rtoc-mokuji.decimal_ol .level-2 li::before {
top: 1px !important;
}