【 サイドバーの カスタマイズ 】記事（リスト）ごとに下線をつける方法

サイドバーに設置する カテゴリーなどの記事をリスト表示する ウィジェットですが
Luxeritasの デフォルトの状態では ラインなしの状態です。

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

今回のカスタマイズイメージはこんな感じです。
では 項目ごとに 下線をつけて リストデザインを カスタマイズしてみたいと思います。

リストに下線をつけるCSS

ラインの CSSの基本は同じで セレクタが変わるだけの 簡単なCSSです。

基本の下線の CSSコード

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

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

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

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

階層のあるリストの カスタマイズ

階層を付けているリストは ラインがうまく表示されないケースがあります。

これは親のカテゴリに下線をつけたものです。

階層を付けている親カテゴリの下にはラインが入らず、階層の下にまとめて線が付いてしまいました。
この解決方法として、親と子のカテゴリを分けて記述してみます。

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

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

cssコードを調べる方法

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

今回、リスト表示するウィジェットに対しての カスタマイズだったので #side や .widget でカスタマイズしました。

ルクセリタス以外のテーマでは このコードでは変わらない。というケースがあります。
また、セレクタやコードが分からない場合に調べる方法を 最後にごあんないしておきます。

カスタマイズしたい場所に カーソルを合わせて右クリックし、表示される項目の一番下の検証をクリックします。
するとブラウザの画面右側に css styleなどが表示されます。

cssの項目に カーソルを合わせると、該当画面の領域がマークされますので どこのコードを編集すればいいのかが分かります。
あとは追加cssでコードを書き込んでいろいろ試してみてください！！