“Table of Contents plus” を超簡単カスタマイズ(シックでシンプルなオレンジ)

目次6

 

今回の記事は、WordPressのプラグイン “Table of Contents plus” を使用した目次デザインを独自にカスタマイズしていきます。(第6弾)

なお、下の記事で他のデザイン集を掲載してますので、ご覧下さい。

淡い緑をベースにしたデザイン(完成図)

まずは、完成図がどのような感じになるかのデモを最初にご紹介します。

下がデモになります。クリック時の動きなどもご確認ください。

DEMO
  • まっすぐに少し浮かせた表示にしました
  • デザインではないですが目次の名称のところは、普通より少し変えて「Agenda(協議事項)」としてます。

”Table of Contents plus” の設定内容

「プラグイン」→「インストール済みプラグイン」をクリックします。

「Table of Contents plus」の下にある「設定」をクリックします。

「見出しテキスト」と「階層表示」と「番号振り」をそれぞれ下のように設定してください。

標準で読み込まれるCSSファイルを対象から外すため、チェックを入れます。

「追加CSS」内にCSSを記載する(コピペ可)

「外観」→「カスタマイズ」をクリックします。

「追加CSS」をクリックすると、テキストを入力できる欄が表示されますので、そこで下の内容を追記します。

 

追加するCSS
#toc_container {
	display: block !important;
	width: 100% !important;
	background: #fff; 
	border: 1px solid #ccc; 
	font-size: 100%; 
	box-sizing: border-box; 
	line-height: 1.4; 
	margin: 26px 0px 10px 0px; 
	padding: 0em; 
	box-shadow: 0px 10px 10px -3px #cccccc;
	border-radius:10px 10px 0px 0px;
}
#toc_container .toc_title{
	font-size:28px !important;
	font-weight:bold;
	background-color:salmon;
	color:white;
	text-align:left;
	padding:25px 10px 24px 30px;
	border-radius:10px 10px 0px 0px ;
	margin:-1px 0px 0px -1px;
}
#toc_container .toc_toggle a{
	color:white;
	padding-left:2px;
	padding-right:2px;
	text-decoration:none;
	cursor:pointer;
}
#toc_container .toc_toggle{
	font-size:16px;
}
#toc_container .toc_number{
	font-weight: bold;
	margin-right: 5px;
	color: #5f6769;
}
#toc_container .toc_list{
	padding-left:35px;
	margin-top:20px;
	margin-bottom:20px;
}
#toc_container .toc_list ul{
	margin:0px 0px 0px 0px;
}
#toc_container .toc_list li{
	font-size:15px;
	margin:10px 0px 10px 0px;
}
#toc_container .toc_list li ul{
		padding-left:20px;
}
#toc_container .toc_list li a{
	color:#5f6769;
	position: relative;
	display: inline-block;
	text-decoration: none;
	cursor:pointer;
}
#toc_container .toc_list li a:hover {
	color:#bbbbbb;
}

いくつか不要かと思われるコードがあるんですが、様々なテーマに対応できるように冗長なコードを含めています。

ただ、すべてのテーマで対応できているわけではないので、必要に応じて調整を行ってください。

デザインの変化【before→after】

【before】目次デザイン

【after】目次デザイン

目次6

最初に載せた完成図のような目次になりましたね。

まとめ

今回は、オレンジをベースにして作成してみました。
選択したときの動きなどはあまり出さず、シンプルな作りにしました。

Follow me!

コメントを残す

CAPTCHA