ワードプレスの「cocoon」のサイドバーのカテゴリー表示はとてもシンプルです。
カテゴリーが少ない場合はこのままで十分なのですが、
カテゴリー数が多かったり、子カテゴリーができると少し見づらいなあと。
そこでここに区切り線を入れてみます。
すると区切り線をうっすら入れるだけでぐっと見やすくなりました◎
今日はこのようにカテゴリー欄に区切り線を入れる方法をご紹介。
コピペするだけで簡単にできるカスタマイズなので是非やってみてくださいね。
区切り線を入れるカスタマイズCSS
以下のコードをCocoonの子テーマの「style.css」に貼るだけでできます。
/*---------------------------------
カテゴリーに区切り線を入れる
--------------------------------*/
.widget_categories ul li a{
border-bottom: 1px solid #CCCCCC; /* 下線の種類 */
}
.widget_categories > ul > li > a:first-child{
border-top: none;
}親テーマである「Cocoon」を編集してしまうとCocoonのアップデートの時に消えてしまったり不具合が起きてしまうので必ず子テーマの「Cocoon Child」が選択されていることを確認して下さいね。
区切り線の種類や色を変える方法
【太さ】
黄色で囲んでいる部分の数字を変更してください。
数字が大きくなるほど太くなります。
【線の種類】
dashed⇨破線
solid⇨ノーマルな実線
dotted⇨点線
ピンクで囲んでいる部分をお好みの種類に変更してください。
【色】
青で囲んでいる部分を変更してください。
カラーは「WEB色見本」を参考に選ぶといいかと思います。
最後に
いかがでしたか？
コピペするだけで簡単に見やすくカスタマイズできるので是非やってみてくださいね☺︎
最後までご覧いただきありがとうございました。
comment