まいどおおきに!おおもと(@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)
}
コピペで簡単にカスタマイズができるので気に入った人は試して見てくださいね♪
著:のんくら(早川 修), 著:a-ki, 著:石田 健介, 著:染谷 昌利
¥2,035 (2021/01/31 10:29時点 | Amazon調べ)

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

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