【ウィジェット】記事(リスト)ごとに下線をつけるCSS
サイドバーに設置してある ウィジェットの カテゴリーなどの
項目ごとに下線をつける リストデザインのカスタマイズです。
テーマによっては デフォルトの状態で下線がある場合とない場合など
いろいろだと思いますが、 カスタマイズも兼ねて
ごあんないさせて頂きます。

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

リストに下線をつけるCSS
ラインのCSSの基本は同じでセレクタが変わるだけの簡単なCSSですが
リストの階層によって少し応用が必要になります。
基本の下線のCSSコード
このコードにセレクタを付けたものが下線のコードになります。
セレクタは項目ごとに変わりますので順に解説していきます。
サイズと線種・色は自由に変更してください。
カラーの見本のサイトはこちら→色の名前とカラーコードが一目でわかるWEB色見本
新着記事リストの下線をつける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&HTML,desing,ウィジェット
Posted by 45
関連記事
Luxeritas(ルクセリタス)サイト画面でチェックしながら 外観カスタマイズ
WordPressテーマは デフォルトの状態から 外観カスタマイズ 機能を使うこ ...
【WordPress】 CSS カスタマイズ ~行間を調整する ~
行間を調整するためのプロパティ ” line-height ” (ライン ハイ ...
【ルクセリタス 】定型文登録をフル活用 !! 文字登録で効率よく記事を作成できる機能
記事作成の中で 頻繁に使う用語 や HTMLのコード 綴りを間違えず、効率よく記 ...
SublimeText インストールと日本語変換のしかた
サイトを作成するためには HTML や CSS といったプログラミング言語を使用 ...
AdSense ディスプレイ広告の作成のしかたと Luxeritas ウィジェットでの設置方法
前回、AdSense の申請のしかたについてごあんないしました。 ここでは基本的 ...
WordPressテーマ Luxeritas ( ルクセリタス )の メニュー (グローバルナビ) 機能の使いかた
WordPress ダッシュボード画面の外観にあります メニューを使って ヘッ ...