Kindleストア売れ筋ランキング

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

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

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

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

カスタマイズ前

カスタマイズ後

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

おおもとのアイコン画像おおもと

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

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

もくじ

目次の設定

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

おおもとのアイコン画像おおもと

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

かんたんカスタマイズ

/*目次ストライプ変更*/
 .-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) 
}  

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

まとめ

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

おおもとのアイコン画像おおもと

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

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

コメント

コメントする

CAPTCHA

もくじ
閉じる