Cocoonの目次をおしゃれっぽくカスタマイズする【WordPress】

Cocoon

今回は細かすぎて伝わりにくいカスタマイズです!

WordPressテーマCocoonの目次をカスタマイズしていきます。
そのままでもいいですが、若干味気がないのと、目立ちにくいので、一目でわかるようにカスタマイズしていきます。

それではやっていきましょう~

スポンサーリンク

子テーマを忘れずに!

カスタマイズをするので必ず子テーマを使いましょう!
子テーマについてはこちらでまとめていますのでご参考にしてください。

Cocoonの子テーマ導入方法はこちら!

デフォルトの状態

コンパクトにまとまっています。
この状態でも十分ですが、目立つようにカスタマイズしていきます。

コード公開

以下のコードをstyle.cssにコピペします。

.toc{
	display:block;
	padding:0;
}
.toc-title{
	position:relative;
	background:#ffbc00;/*最上部背景色*/
	padding:10px 0;
	color:#fff;
	font-weight:bold;
}
.toc-title:before{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	right:50%;
	transform: translate(-50%,0%);
	border:15px solid transparent;
	border-top:15px solid #ffbc00;/*toc-titleの背景色と同色*/
}
.toc .toc-content{
	padding:10px
}
.toc .toc-content ol li a,
.toc .toc-content ul li a{
	display:block;
	border-bottom:1px dashed #ababab;
	margin-left:-20px;
	padding-left:20px;
}

このようになります!

目次そのものの幅を広くし、線などに色を付けました。
上記コードのコメントに対応する箇所を変更することで、色や太さを変更することが出来ます。

自分の好みやサイトに合わせて変更してみて下さい!

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント