“Table of Contents plus” を超簡単カスタマイズ(青でカジュアルに)

青色でカジュアルに

 

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

 

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

 

濃い青をベースにしたカジュアルなデザイン(完成図)

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

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

DEMO
  • 周りに縫い目で囲ってあります
  • カーソルを持って行くと縫い目で下線が左から右に表示されます
  • 濃い青をベースに白で文字を表示されます

”Table of Contents plus” の設定内容

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

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

 

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

 

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

 

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

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

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

 

追加するCSS
#toc_container {
	display: block !important;
	width: 100% !important;
	background: #fff; 
	font-size: 100%; 
	box-sizing: border-box; 
	line-height: 1.4; 
	margin: 16px auto; 
	padding: 0em 0em; 
}
#toc_container .toc_title {
	position: relative;
	background: #375E97;
	box-shadow: 0px 0px 0px 5px #375E97;
	border: dashed 2px white;
	padding: 0.1em 0.8em;
	color: white;
	font-size:25px;
	line-height: 210%;
	margin: 0 8px 0 8px;
}
#toc_container .toc_title:after {
	position: absolute;
	content: '';
	left: -8px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #a8d4ff;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#toc_container .toc_title:before {
	font-size:24px;
	font-family: "Font Awesome 5 Free";
	content: '\f520';
	font-weight: 900;
	padding-right:10px;
}
#toc_container .toc_toggle{
	font-size:16px;
}
#toc_container .toc_toggle a{
	color:white;
	padding-left:2px;
	padding-right:2px;
	box-shadow:none;
}
#toc_container .toc_number{
	padding-right:5px;
}
#toc_container .toc_list{
	margin-top:15px;
	background: #375E97;
	box-shadow: 0px 0px 0px 5px #375E97;
	border: dashed 2px white;
	padding: 0.8em 0.2em 0.8em 0.2em;
	color: white;
	margin-left:8px;
	margin-right:8px;
}
#toc_container .toc_list li{
	list-style: none;
	margin-bottom:5px;
}
#toc_container .toc_list li a{
	color:white;
	display: inline-block;
	text-decoration: none;
	padding-left:10px;
	box-shadow:none;
}
#toc_container .toc_list li a::after{
	border-bottom: dashed 2px #fff;
	bottom: 0;
	content: "";
	display: block;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	width: 0;
}
#toc_container .toc_list li a:hover::after {
	width: 102%;
}
#toc_container .toc_list ul{
	margin-left:-20px;
	margin-top:5px;
	margin-bottom:5px;
	padding-left:40px;
}

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

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

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

【before】目次デザイン

【after】目次デザイン

目次デザイン(青でカジュアルに)

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

 

まとめ

今回は、濃い青をベースに裁縫してあるようなカジュアルな感じで作成してみました。

カーソルを合わせた時の挙動も裁縫されてる風に作ってみました。

 

 

Follow me!

コメントを残す

CAPTCHA