【SANGO】もくじのデザインをカスタマイズ（2種類）

SHARE

SANGO ではデフォルトで TOC+ が出力するもくじのデザインが実装されていますが、サイトに合わせてこんな風に変更してみました。

もくじ
ここのデザイン
もくじ
別サイトのデザイン

ラベル部分を吹き出しにしてコンテンツを枠線で囲ったもくじ

まずはここのもくじのデザインから。実装するとこんな感じです。PORIPU の吹き出し付きの BOX 風。
もくじ

注意

もくじを開く・閉じるのボタンと TOC+ のデフォルトの CSS は、TOC+ の設定からオフにしてあります。

実装する方法

下の CSS を子テーマの style.css にコピペして、色を指定している部分を好みの色に書き換えてください。

サイドバーの TOC+ ウィジェットにも同じデザインが適用され、画面の50％より長くなった場合にはスクロールされるようになります。（記事内のもくじはスクロールしません）

style.css

.entry-content #toc_container{
	width:90%!important;
	margin: 2em auto;
	padding: 0 25px 15px;
	background: none;
	border: 2px solid #枠線の色;
	border-radius: 3px;
}
.entry-content #toc_container .toc_title {
	position: relative;
	display: inline-block;
	margin: 0;
	top: -1.5em;
	left: -1em;
	padding: 5px 20px;
	min-width: 120px;
	color: #吹出の文字色;
	background: #吹出の色;
	border-radius: 17px;
	font-size: 14px;
	font-weight: bold;
	line-height:24px;
	text-align: center;
}
.entry-content #toc_container .toc_title:before {
	content: "";
	position: absolute;
	width:auto;
	top: 100%;
	left: 30%;
	margin-left: -15px;
	border: 10px solid transparent;
	border-top: 10px solid #吹出の色;
	border-radius:0;
	line-height:normal;
	background: none;
}
#toc_container ul.toc_list, #toc_container .toc_list li ul li {
	list-style-type: none;
}
.toc_depth_2, .toc_depth_3{
	display:none;
}
.toc_number {
	font-size: 16px;
	padding: 3px 8px;
	background: #丸数字の背景色;
	color: #fcfcfc;
	border-radius: 50%;
	font-family: Arial,sans-serif;
	font-weight: bold;
}
#toc_container .toc_list li ul li:before, .widget .toc_widget_list ul li a:before{
	position: relative;
	top: -2px;
	display: inline-block;
	width: 8px;
	height: 8px;
	content: '';
	border-radius: 50%;
	background: #見出しの前の丸いアイコンの色;
	margin-right: .5em;
	padding-right:0;
}
#toc_container ul.toc_list {
	padding: 0;
	margin: 0;
}
.entry-content #toc_container ul li ul {
	padding: .1em 0 0 1em;
	margin:3px;
}
.widget .toc_widget_list li ul{
margin-left:1em;
}
#toc-widget-2 .toc_widget_list {
	max-height: 50vh;
	overflow: auto;
}
.toc_widget_list::-webkit-scrollbar{width: 12px;} /*スクロールバーの幅*/
.toc_widget_list::-webkit-scrollbar-track{background: #fbfbfb;} /*スクロールバーの背景色*/
.toc_widget_list::-webkit-scrollbar-thumb{border-radius:6px;background:#eaedf7;} /*スクロールバーの色と角の丸さ*/

@media only screen and (max-width:480px){
.entry-content #toc_container{
	width:100%!important;
}
}

もくじの背景に画像を置く

下の別サイトのデザインのようにボックスの右下に画像を表示させたい場合は、8行目に以下を書き足してください

8行目に書き足す

background: url(https://画像のURL) right bottom no-repeat;

画像の位置や並べ方は他にも色々指定できます。

ボックス全体に画像を敷き詰めたい場合

8行目に書き足す

background: url(https://画像のURL) repeat;

右側に垂直方向に並べる場合

8行目に書き足す

background: url(https://画像のURL) right repeat-y;

下側に横方向に並べる場合

8行目に書き足す

background: url(https://画像のURL) bottom repeat-x;

ラベル部分に背景色を付けてコンテンツを枠線で囲ったもくじ（ボックス右下に画像付き）

次は別サイトの方のもくじのデザイン。実装するとこんな感じです。
もくじ

注意

もくじを開く・閉じるのボタンと TOC+ のデフォルトの CSS は、TOC+ の設定からオフにしてあります。

実装する方法

下の CSS を子テーマの style.css にコピペして、色や画像を指定している部分を好みのものに書き換えてください。

サイドバーの TOC+ ウィジェットにも同じデザインが適用され、画面の50％より長くなった場合にはスクロールされるようになります。

style.css

.entry-content #toc_container {
	width:90%!important;
	margin: 2em auto;
	background: url(https://右下に入る画像のURL) right bottom no-repeat;
	box-shadow: none;
	border-radius: 3px;
	border: 2px solid #枠線の色;
	padding: 0;
}
.entry-content #toc_container .toc_title {
	width: 100%;
	background: #ラベル部分の背景色;
	color: #ラベルの文字色;
	font-size: 18px;
	margin: 0;
	padding: .5em 40px;
	text-align: center;
}
#toc_container .toc_list {
	margin-bottom: 1em;
	margin-left: 2em;
}
#toc_container ul.toc_list, #toc_container .toc_list li ul li {
	list-style-type: none;
}
#toc_container .toc_title:before, .toc_depth_2, .toc_depth_3{
	display:none;
}
.toc_number {
	font-size: 16px;
	padding: 3px 8px;
    background: #丸数字の背景色;
	color: #fcfcfc;
	border-radius: 50%;
	font-family: Arial,sans-serif;
	font-weight: bold;
}
#toc_container .toc_list li ul li:before, .widget .toc_widget_list ul li a:before{
	position: relative;
	top: -2px;
	display: inline-block;
	width: 8px;
	height: 8px;
	content: '';
	border-radius: 50%;
	background: #見出しの前の丸いアイコンの色;
	margin-right: .5em;
	padding-right:0;
}
.entry-content #toc_container ul li ul {
	padding: .1em 0 0 1em;
	margin:3px;
}
.widget .toc_widget_list li ul{
margin-left:1em;
}
#toc-widget-2 .toc_widget_list {
	max-height: 50vh;
	overflow: auto;
}

.toc_widget_list::-webkit-scrollbar{width: 12px;} /*スクロールバーの幅*/
.toc_widget_list::-webkit-scrollbar-track{background: #fbfbfb;} /*スクロールバーの背景色*/
.toc_widget_list::-webkit-scrollbar-thumb{border-radius:6px;background:#eaedf7;} /*スクロールバーの色と角の丸さ*/

@media only screen and (max-width:480px){
.entry-content #toc_container{
	width:100%!important;
}
}

前の記事

今まで利用したことがあるレンタルサーバーの使用感まとめ

次の記事

【SANGO】トップページのカスタマイズ（簡潔版）