WordPressのサイドバーのリストの最後の下線を消したいとき

 WordPress で運用されているブログは、ダイナミックサイドバーを使ってサイドバーを実現しているテーマが多いと思いますが、「最近の投稿」や「アーカイブ」などは ul と li を使用したリストになっています。ここで、見やすくしようとしたり、見栄えをよくしようとしてリストの項目ごとに下線を引こうとすると、

20150828_1

このようになり、リストの最後にまで下線が表示されて、「うぬぬ」となることかと思います。今回はこれを避けるにはどうしたらよいか、というお話です。

消せないものと諦める

 諦めないで。

ul に枠をつけて ul の padding と li の margin で調整する

 この方法だと、一応基本的な CSS の調整だけで最後の下線を消すことができます。

結果はこちら。

20150828_2

今回は ul につけた枠の色が li の下線の色と違っていますが、これを同じ色にして、ul の枠を solid、li の下線を dotted などで指定すれば、誤魔化すことができるかもしれません。ただなぁ、見栄えよくないし、解決の方法としてもスマートでない。

疑似クラスの「last-child」を使いましょう

こうなります。

20150828_3

IE8 ではこれが機能しないらしいのですが、そんな人、もういませんよね?

jQuery でも解決できます

 WordPress に最初からインストールされている jQuery を使う話は前にエントリーにしました。

[超訂正] WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net

今回も同じ方法を使い、ソースはこのようになります。

リストの最後の下線を消すだけなら大袈裟かもしれませんが、この方法だと IE8 でも動作するようなので、古いブラウザとの交換性が心配なら、こちらがいいのかもしれません。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP