まいどおおきに！おおもと(@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の目次背景を変更するカスタマイズ記事でした♪
おおもとおすすめのカスタマイズです！
このカスタマイズが気に入った人はぜひ試してみてくださいね！
コメント