AFFINGER専用の目次プラグイン「SUGOI MOKUJI」は、プレミアム版じゃないと細かいデザイン調整ができません。
ということで、無理やりCSSでデザインを変えてみました。無料版の「SUGOI MOKUJ LITE」をカスタマイズしたものなので、有料版を購入しなくても大丈夫ですよ。
事前に
まずはカスタマイズ > オプション（その他）> 目次プラグイン から、目次に関するデザイン設定をリセットしましょう。各パーツの色はデフォルトにして、全てのチェックを外し、デザインは「デフォルト」にしておきます。
カスタマイザーによるデザインが反映されていると、CSSによるデザインが崩れる可能性があるので注意してください。
シンプルな目次デザイン
シンプルこそ至高。視認性と読みやすさだけにこだわった目次デザインです。
大きすぎると思うかもしれませんが、目次は記事の中で最も読まれる・クリックされるパーツ。大きすぎるぐらいがベストなサイズ感です。
クリックでCSSを見る
/*** 目次デザイン ***/
#st_toc_container{
background: white;
border: 1px solid rgb(200 200 200 /50%);
padding: 1.5em;
}
#st_toc_container .st_toc_title{ /*タイトル*/
margin: 0 0.5rem 0.5em 0.5rem;
padding-bottom: 0.5em;
font-size: 1.25rem;
display: block;
text-align: left;
}
#st_toc_container .st_toc_list{ /*リスト全体*/
margin: 0 2rem;
}
#st_toc_container .st_toc_list > li{ /*第一階層*/
margin-top: 1rem;
padding-top: 0.5rem !important;
position: relative;
list-style-type: disc; /* 黒丸を付ける */
border-top: 1px dashed rgb(200 200 200 /50%);
}
#st_toc_container .st_toc_list > li > a{ /*第一階層のリンク*/
display: inline-block; /* 不具合修正 */
font-weight: normal !important;
font-size: 1rem;
padding: 1rem 0;
}
#st_toc_container > .st_toc_list > li > ul{
padding: 4px 0 0 1em !important;
}
#st_toc_container .st_toc_list > li > ul > li{ /*第二階層*/
list-style-type: circle; /* 丸を付ける */
font-weight: normal !important;
font-size: 0.9em;
}
#st_toc_container .st_toc_list > li > ul > li > a{ /*第二階層のリンク*/
font-weight: normal !important;
display: inline-block; /* 不具合修正 */
}ブログ風
ブログでよく見かけるタイプの目次デザイン。
色付きの帯を付けて、枠には box-shadow の影で立体っぽくしています。色の方はブログのデザインを考慮して調整してください。
クリックでCSSを見る
/*** 目次デザイン ***/
#st_toc_container{ /* 大枠 */
padding: initial !important;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border-radius: 6px;
max-width: 720px;
}
#st_toc_container .st_toc_title{ /*タイトル*/
padding: 1rem;
margin: initial;
display: block;
text-align: center;
font-size: 1.25rem;
background: #003775; /*上枠の色*/
color: white;
border-radius: 6px 6px 0 0;
}
#st_toc_container .st_toc_list{ /*リスト全体*/
padding: 0 1rem 2rem 2rem;
margin: 1rem;
}
#st_toc_container .st_toc_list > li{ /*第一階層*/
padding-top: 0.5rem !important;
position: relative;
list-style-type: disc;
}
#st_toc_container .st_toc_list > li > a{ /*第一階層のリンク*/
display: inline-block; /* 不具合修正 */
padding: 1rem 0;
}
#st_toc_container .st_toc_list > li > ul > li{ /*第二階層*/
list-style-type: circle; /* 丸を付ける */
font-weight: normal !important;
}
#st_toc_container .st_toc_list > li > ul > li > a{ /*第二階層のリンク*/
display: inline-block; /* 不具合修正 */
font-weight: normal !important;
}紙に書いた目次
紙を3枚並べたような目次デザイン。
手書きフォントとの相性は抜群です。（画像はよもぎフォント）
クリックしてCSSを見る
/*** 目次デザイン ***/
.entry-content{ /* メインコンテンツにz-indexを指定 */
position: relative;
z-index: 0;
}
#st_toc_container{ /* 大枠 */
padding: initial !important;
margin: 26px auto 0;
max-width: 650px;
min-height: 300px;
padding: 1.5rem;
position: relative;
width: 90%;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: auto;
}
#st_toc_container:before, #st_toc_container:after{
position: absolute;
content: "";
height: 98%;
width: 100%;
z-index: -1;
}
#st_toc_container:before{
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-3.2deg);
}
#st_toc_container:after{
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.8deg);
}
#st_toc_container .st_toc_title{ /*タイトル*/
padding-top: 1.5rem;
margin: initial;
display: block;
text-align: center;
font-size: 1.1rem;
}
#st_toc_container .st_toc_list{ /*リスト全体*/
padding: 0 1rem 2rem 2rem;
margin: 1rem;
}
#st_toc_container .st_toc_list > li{ /*第一階層*/
padding-top: 0.5rem !important;
position: relative;
list-style-type: disc; /* 黒丸を付ける */
}
#st_toc_container .st_toc_list > li > a{ /*第一階層のリンク*/
display: inline-block; /* 不具合修正 */
padding: 1rem 0;
font-weight: normal !important;
}
#st_toc_container .st_toc_list > li > ul > li{ /*第二階層*/
list-style-type: circle; /* 丸を付ける */
font-weight: normal !important;
}
#st_toc_container .st_toc_list > li > ul > li > a{ /*第二階層のリンク*/
display: inline-block; /* 不具合修正 */
font-weight: normal !important;
font-size: 0.9rem;
}背景に透過文字
背景に目次を意味する "INDEX" を入れた目次デザイン。
本当は背景画像を使う方が綺麗になりますが、画像は人によりけりなのでテキストを使いました。なお、小さいスマホだと文字がはみ出るため、PC向けのデザインとなります。
クリックでCSSを見る
/*** 目次デザイン ***/
#st_toc_container{
position: relative;
z-index: 0;
}
#st_toc_container .st_toc_title{ /*タイトル*/
margin: 0 0.5rem 0.5em 0.5rem;
padding-bottom: 0.5em;
font-size: 1.25rem;
display: block;
text-align: left;
}
#st_toc_container .st_toc_list{ /*リスト全体*/
margin: 0 2rem;
z-index: auto;
}
#st_toc_container .st_toc_list:before{
position: absolute;
content: "INDEX";
font-size: 10rem;
color: #e0e0e0;
opacity: 0.5;
left: calc(50% - 25rem * 0.83);
top: calc(50% - 25rem / 2);
width: 50rem;
transform: rotate(30deg); /* 回転 */
-webkit-transform: rotate(30deg);
transform-origin: 0 0; /* 回転軸 */
z-index: -1;
}
#st_toc_container .st_toc_list > li{ /*第一階層*/
margin-top: 1rem;
padding-top: 0.5rem !important;
position: relative;
list-style-type: disc; /* 黒丸を付ける */
border-top: 1px dashed rgb(200 200 200 /50%);
}
#st_toc_container .st_toc_list > li > a{ /*第一階層のテキスト*/
display: inline-block;
font-weight: normal !important;
font-size: 1rem;
padding: 1rem 0;
}
#st_toc_container > .st_toc_list > li > ul{
padding: 4px 0 0 1em !important;
}
#st_toc_container .st_toc_list > li > ul > li{ /*第二階層*/
list-style-type: circle; /* 丸を付ける */
font-weight: normal !important;
font-size: 0.9em;
}
#st_toc_container .st_toc_list > li > ul > li > a{ /*第二階層のテキスト*/
display: inline-block;
font-weight: normal !important;
}