【SWELLカスタマイズ】目次のストライプの色を変えるカスタマイズ♪

まいどおおきに!おおもと(@so88qa)です♪

最近話題のWordPressテーマSWELLのコピペで簡単カスタマイズ記事です!

今回のカスタマイズはコチラ↓

カスタマイズ前

カスタマイズ後

SWELLで一番使われているであろうストライプの目次のストライプの色を変更してみました!

おおもと

かなりお気に入りのカスタマイズです!

気になる人はSWELLカスタマイズの参考にしてくださいね♪

もくじ

目次の設定

カスタマイズの前にSWELLの目次のデザインを「ストライプ背景」にしてください。

おおもと

ストライプ背景にしないとカスタマイズが反映されません^^;

著:染谷 昌利, イラスト:大場ミミコ
¥1,760 (2021/01/31 10:29時点 | Amazon調べ)

かんたんカスタマイズ

/*目次ストライプ変更*/
 .-double.p-toc{
background:repeating-linear-gradient(-45deg,transparent 0 2px,rgba(43,129,171,.05) 2px 4px);
}

ストライプの色を変えたい人はコード内のrgba(43,129,171,.05)を好きな色に変えてくださいね♪

おおもと

ちなみにボクのブログはこんな感じのカスタマイズをしています。

/*目次変更*/
.p-toc__ttl{
	font-weight:bold;
}

.-double .p-toc__ttl{
	margin-bottom:2rem;
}

 .-double.p-toc{
	 border-top-color:#226789;
	 border-top-style:solid;
	 border-top-width:15px;
	 border-top-right-radius:3px;
	 border-top-left-radius:3px;
	 border-bottom:none;
	 background:repeating-linear-gradient(-45deg,transparent 0 2px,rgba(43,129,171,.05) 2px 4px) 
}  

コピペで簡単にカスタマイズができるので気に入った人は試して見てくださいね♪

著:のんくら(早川 修), 著:a-ki, 著:石田 健介, 著:染谷 昌利
¥2,035 (2021/01/31 10:29時点 | Amazon調べ)

カスタマイズのまとめ

この記事はSWELLの目次背景を変更するカスタマイズ記事でした♪

おおもと

おすすめのカスタマイズです!

このカスタマイズが気に入った人はぜひ試してみてくださいね!

Share Now

コメントする

CAPTCHA

もくじ
閉じる