サイドバーのリスト一覧に下線をつける CSSカスタマイズ |ルクセリタス
サイドバーに設置する カテゴリーなどのリスト表示するウィジェットですが
Luxeritasの デフォルトの状態では ラインなしの状態です。
シンプルでもいいのですが、ラインでカスタマイズすることによって
可愛くもカッコよくもなり自分の表現したい サイトのイメージを作ることができますよ。
サイドバーリスト一覧のビフォーアフター
タイトル部分はカスタマイズしていますが リストはデフォルトの状態です。

今回のカスタマイズイメージはこんな感じです。
では 項目ごとに 下線をつけて リストデザインを カスタマイズしてみたいと思います。
リストに下線をつけるCSS
リストのカスタマイズはラインのCSSを使った 簡単なCSSです。
セレクタ(指定する場所)に線のサイズ・線種・色を指定していきます。
カラーの見本のサイトはこちら→色の名前とカラーコードが一目でわかるWEB色見本
リストに使用するラインの種類やカスタマイズの基礎的な内容は
ラインのCSSの記事でまとめていますので参考にしてみてください。
新着記事リストの下線をつけるCSS
1 2 3 4 5 6 |
/*新着記事の上下幅と下線*/ #thk-new .toc { border-bottom:
3px
dashed
#ddd; padding:
8px
0; } |
新着記事にはシンプルにこのコードでカスタマイズできます。
階層のあるリストの カスタマイズ
階層を付けているリストは ラインがうまく表示されないケースがあります。
1 2 3 4 5 |
/* サイドバーリストに下線*/
#side .widget li{ border-bottom:
3px
dashed
#ddd; } |
これは親のカテゴリに下線をつけたものです。
階層を付けている親カテゴリの下にはラインが入らず、階層の下にまとめて線が付いてしまいました。
この解決方法として、親と子のカテゴリを分けて記述してみます。
1 2 3 4 5 6 7 8 9 10 |
/* サイドバーリストに下線*/ #side .widget li { border-bottom:
3px
dashed
#ddd; } #side .widget li li{ border-top:
3px
dashed
#ddd; border-bottom:
none; padding-bottom:0;
} |
子カテゴリに border-bottm の下線をつけない 【none】という指示と
border-top にラインを付ける。という指示で全体に均一な ラインを引くことができました。
もともとあるラインを消したい場合もこちらの【none】 という指示で 対応できます。
cssコードを調べる方法
いかがでしょうか。コピペするだけでかんたんに カスタマイズできるかと思います!
みなさんも 色や線の幅を試してみてくださいね。
今回、リスト表示するウィジェットに対しての カスタマイズだったので #side や .widget でカスタマイズしました。
ルクセリタス以外のテーマでは このコードでは変わらない。というケースがあります。
また、セレクタやコードが分からない場合に調べる方法を 最後にごあんないしておきます。
カスタマイズしたい場所に カーソルを合わせて右クリックし、表示される項目の一番下の検証をクリックします。
するとブラウザの画面右側に css styleなどが表示されます。
cssの項目に カーソルを合わせると、該当画面の領域がマークされますので どこのコードを編集すればいいのかが分かります。
あとは追加cssでコードを書き込んでいろいろ試してみてください!!
関連記事
サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress
WordPressテーマ ルクセリタスの機能のひとつに 外観カスタマイズがありま ...
【 ルクセリタス 】固定ページをつかって サイトマップを表示させる
固定ページは 通常の 投稿ページと違い、カテゴリや タグの設定がない代わりに ペ ...
カスタム構造を使って最適なパーマリンクを設定【WordPress】
パーマリンクは WebサイトのURL (ドメイン) のあとに続く 記事ごとのUR ...
リンクのカスタマイズ – 色と アンダーラインを消すCSS
リンクは 青文字にアンダーラインが基本的なCSSのデザインです。 アンダーライン ...
【ルクセリタス】アイコンフォント設定と色のカスタマイズ|WordPress
Webサイトでは ホーム画面を表す家の形のアイコンだったり フォルダのアイコンや ...
プラグイン|Crayon-Syntax-Highlighter のインストールとテーマの紹介
Webサイトの投稿記事内に HTML や CSSなどのソースコードを 分かりやす ...
Tag