Simplicity利用時のTable Of Contents PlusのCSSサンプル

2017年9月25日

パソコン

記事の目次を表示させてくれるプラグインに「Table Of Contents Plus」があります。

インストールして簡単な設定をするだけで、自動的に記事の見出しタグで目次を作ってくれますので利用されている方も多いようです。

ただ、Table Of Contents Plusのデザインだとなんだかしっくりこないので、CSSでデザインを変えてみることにしました。

※CSSは基本的にわからないので、自分用の備忘録です。CSSが合っているかどうかはわかりません。

Table Of Contents Plusの設定画面で変更したこと

<利用環境>
テーマ:Simplicity2

手順1.まずは、Table Of Contents Plusの設定を少し変更します。Wordpressの管理画面→設定→TOC+を選びます。

  1. 「番号振り」のチェックをはずす
  2. 上級者向けの「CSS ファイルを除外」にチェックを入れる

手順2.CSSを子テーマの「style.css」「responsive.css」
mobile.css」へ追記します。

/* TOC 目次 */
#toc_container{
	display: block !important;
	width: 80% !important;
	margin-top:30px;
	border: 1px dotted #DCD7B1;
	font-size: 0.9em;
	padding-right: 16px;
	padding-left: 16px;
	background-color: #fff;
}
#toc_container .toc_title{
	color: #3A3A3A;
	text-align: center; /* 中央寄せ */
}
#toc_container .toc_title:before{
	content: "\f0f6";
	font-family: FontAwesome;
	padding-right: 6px;
	font-weight: normal;
	color: #999;
}
#toc_container .toc_toggle a{
	color: #444;
}
#toc_container ul{
	counter-reset:number;
list-style:none;
}
#toc_container ul li{
	line-height: 1.25em;
	margin-bottom: 0.5em;
	margin-left:16px;
}
#toc_container ul li:before{
	counter-increment: number;
	content: counter(number);
	color: #444;
	padding-right:10px;
	margin-left:-20px;
}
#toc_container ul li a{
	color: #444;
	text-decoration: none;
}
#toc_container ul li a:hover {
	text-decoration: underline;
}
#toc_container ul ul{
	margin-top: 0.5em;
}
#toc_container ul ul li{
	line-height: 1.25em;
	margin-bottom: 0.5em;
	margin-left:-2px;
}
#toc_container ul ul li:before{
	content: "\f0da";
	font-family: FontAwesome;
	padding-right: 6px;
	margin-left:0px;
	color: #CCC;
	font-weight: normal;
	margin-left:-11px;
}
#toc_container ul ul li a{
	color: #3D3D3D;
	font-weight: normal;
	padding-right:6px;
}

CSSを適用した仕上がり

できあがりはこんな感じになりました。

参考にしたサイト

サイト 「Table Of Contents Plus」の目次を見やすくするためのCSSデザイン変更事例

サイト Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!

ほとんどWebデザイナーFANさんのCSSそのままです。

※投資についての記事も掲載しておりますが、このサイトは投資を推奨するものではありません。投資はリスクが伴いますので自己責任でお願いいたします。

スポンサーリンク

ブログ運営

Posted by myu