WordPress で運用されているブログは、ダイナミックサイドバーを使ってサイドバーを実現しているテーマが多いと思いますが、「最近の投稿」や「アーカイブ」などは ul と li を使用したリストになっています。ここで、見やすくしようとしたり、見栄えをよくしようとしてリストの項目ごとに下線を引こうとすると、
このようになり、リストの最後にまで下線が表示されて、「うぬぬ」となることかと思います。今回はこれを避けるにはどうしたらよいか、というお話です。
消せないものと諦める
諦めないで。
ul に枠をつけて ul の padding と li の margin で調整する
この方法だと、一応基本的な CSS の調整だけで最後の下線を消すことができます。
1 2 3 4 5 6 7 8 9 10 11 | .widget_recent_entries ul { border-right: 1.5px solid #9900FF; border-bottom: 1.5px solid #9900FF; border-left: 1.5px solid #9900FF; padding-bottom: 0; } .widget_recent_entries ul li { border-bottom: 1.5px solid #f00; margin-bottom: -2px; } |
結果はこちら。
今回は ul につけた枠の色が li の下線の色と違っていますが、これを同じ色にして、ul の枠を solid、li の下線を dotted などで指定すれば、誤魔化すことができるかもしれません。ただなぁ、見栄えよくないし、解決の方法としてもスマートでない。
疑似クラスの「last-child」を使いましょう
1 2 3 4 5 6 7 | .widget_recent_entries ul li { border-bottom: 1.5px solid #f00; } .widget_recent_entries ul li:last-child { border-bottom: none; } |
こうなります。
IE8 ではこれが機能しないらしいのですが、そんな人、もういませんよね？
jQuery でも解決できます
WordPress に最初からインストールされている jQuery を使う話は前にエントリーにしました。
[超訂正] WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net
今回も同じ方法を使い、ソースはこのようになります。
1 2 3 | jQuery(document).ready(function($) { $(".widget_recent_entries ul li:last-child").css("border-bottom", "none"); }); |
リストの最後の下線を消すだけなら大袈裟かもしれませんが、この方法だと IE8 でも動作するようなので、古いブラウザとの交換性が心配なら、こちらがいいのかもしれません。
Comment