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

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

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

サイドバーのカスタマイズー記事の下線を付けるイメージ画像
下線なし

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

サイドバーのカスタマイズー記事の下線を付けるイメージ画像
下線あり

リストに下線をつけるCSS

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

基本の下線のCSSコード

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

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

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

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

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

これは親のカテゴリに下線をつけたものです。
階層を付けている親カテゴリには下線が付かず、
階層の下にまとめて線が付いてしまいました!
サイドバーのカスタマイズー記事の下線を付けるイメージ画像
これの解決方法として、親と子のカテゴリを分けて記述してみます。

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

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

ー まとめ ー

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

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