サイドバーのリスト一覧に下線をつける CSSカスタマイズ ｜ルクセリタス

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

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

サイドバーリスト一覧のビフォーアフター

タイトル部分はカスタマイズしていますが リストはデフォルトの状態です。

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

リストに下線をつけるCSS

リストのカスタマイズはラインのCSSを使った 簡単なCSSです。

セレクタ(指定する場所)に線のサイズ・線種・色を指定していきます。
カラーの見本のサイトはこちら→色の名前とカラーコードが一目でわかるWEB色見本

リストに使用するラインの種類やカスタマイズの基礎的な内容は
ラインのCSSの記事でまとめていますので参考にしてみてください。

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

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

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

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

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

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

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

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

cssコードを調べる方法

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

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

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

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

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