WordPress でテーマを自分で作ったとき、がんばってデザインを考えたのにリンクの色などが気に食わない場合にお役に立ててください。最近は CSS を使ってかっこいいアニメーションなどで装飾したりする場合も多いでしょうが、今回の方法ならかなり簡単にカスタムできます。
標準のリンク
リンクに特に CSS を設定しなければ、下のようなお馴染みのリンクだと思います。
「a:hover」を設定していなければ、マウスカーソルの形が変わるだけです。
このリンクでも機能的には十分ですが、一部文字と重なる部分がでるなどデザイン的にいささか不満が残ります。これを解決するには、リンクの text-decoration を使わず border の下側だけ表示させて下線として利用します。
border を利用する
border とは外枠を設定するものですが、「border-bottom」をリンクの下線として使います。まずは、リンクの下線を消すために text-decoration を none に設定し、リンクの文字色を本文の文字の色と同じに設定します。
1 2 3 4 | a { color: #333; text-decoration: none; } |
余談になりますが、多くの Web サイトでは、本文の色を純粋な黒で設定せず、濃い目の灰色を使うことが多いです。そのほうが読みやすいとか、目が疲れにくいとかあるのかもしれません。多いのが「#333」なので、それにならうことにしました。
1 2 3 4 5 6 | a { color: #333; text-decoration: none; border-bottom: 1px solid #333; padding-bottom: 1px; } |
border-bottom を使って solid タイプの 1px の太さの下線を #333 で設定しました。文字と下線との距離は padding-bottom で調節します。あまり下線との距離を大きくとりすぎると、次の行の文字と重なったりするので注意してください。
リンクの下線とリンクの文字との重なりが解消されました。ついでに、マウスが乗ったら色が変わるように a:hover の設定もしましょう。
1 2 3 4 | a:hover { color: #F97A0B; border-bottom: 1px solid #F97A0B; } |
自分のブログのデザインにあった色を指定すればよいでしょう。
border-bottom で色を指定しないと、下線だけ黒のままになります。どのようにデザインするのかで変わってくると思いますが、マウスが乗ったときに下線の色も変更したい場合は、color と border-bottom で色を統一するようにしてください。
Comment