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

2021 1/31

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

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

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

カスタマイズ前

カスタマイズ後

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

おおもと

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

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

目次の設定

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

おおもと

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

ブログ飯個性を収入に変える生き方

著:染谷昌利, イラスト:大場ミミコ

¥1,760 （2021/01/31 10:29時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahooショッピングで探す

ポチップ

かんたんカスタマイズ

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

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