【ウィジェット】記事（リスト）ごとに下線をつけるCSS

サイドバーに設置してある ウィジェットの カテゴリーなどの
項目ごとに下線をつける リストデザインのカスタマイズです。

テーマによっては デフォルトの状態で下線がある場合とない場合など
いろいろだと思いますが、 カスタマイズも兼ねて
ごあんないさせて頂きます。

こちらもシンプルでいいのですが、
ラインの種類などによって 可愛くもカッコよくもなり
自分の表現したいサイトのイメージを形作ることができるのです。

リストに下線をつけるCSS

ラインのCSSの基本は同じでセレクタが変わるだけの簡単なCSSですが
リストの階層によって少し応用が必要になります。

基本の下線のCSSコード

このコードにセレクタを付けたものが下線のコードになります。
セレクタは項目ごとに変わりますので順に解説していきます。
サイズと線種・色は自由に変更してください。

カラーの見本のサイトはこちら→色の名前とカラーコードが一目でわかるWEB色見本

新着記事リストの下線をつけるCSS

新着記事にはシンプルにこのコードでカスタマイズできます。

カテゴリには階層があります！

これは親のカテゴリに下線をつけたものです。
階層を付けている親カテゴリには下線が付かず、
階層の下にまとめて線が付いてしまいました！

これの解決方法として、親と子のカテゴリを分けて記述してみます。

子カテゴリに border-bottm の下線をつけない 【none】という指示と
border-top にラインを付ける。という指示で全体に均一な
ラインを引くことができました。

もともとあるラインを消したい場合もこちらの 【none】 という指示で
対応できます。

ー まとめ ー

いかがでしょうか。
コピペするだけでかんたんにカスタマイズできるかと思います！
みなさんも 色や線の幅を試してみてくださいね。

テーマによってはコードの記述が変わるかも知れませんので
その際は、いろいろと試してみてください！！