簡単だけどWordPressのデザインに統一感をだすリンクの装飾

 WordPress でテーマを自分で作ったとき、がんばってデザインを考えたのにリンクの色などが気に食わない場合にお役に立ててください。最近は CSS を使ってかっこいいアニメーションなどで装飾したりする場合も多いでしょうが、今回の方法ならかなり簡単にカスタムできます。

標準のリンク

 リンクに特に CSS を設定しなければ、下のようなお馴染みのリンクだと思います。

20160617_1

「a:hover」を設定していなければ、マウスカーソルの形が変わるだけです。

20160617_2

このリンクでも機能的には十分ですが、一部文字と重なる部分がでるなどデザイン的にいささか不満が残ります。これを解決するには、リンクの text-decoration を使わず border の下側だけ表示させて下線として利用します。

border を利用する

 border とは外枠を設定するものですが、「border-bottom」をリンクの下線として使います。まずは、リンクの下線を消すために text-decoration を none に設定し、リンクの文字色を本文の文字の色と同じに設定します。

 余談になりますが、多くの Web サイトでは、本文の色を純粋な黒で設定せず、濃い目の灰色を使うことが多いです。そのほうが読みやすいとか、目が疲れにくいとかあるのかもしれません。多いのが「#333」なので、それにならうことにしました。

border-bottom を使って solid タイプの 1px の太さの下線を #333 で設定しました。文字と下線との距離は padding-bottom で調節します。あまり下線との距離を大きくとりすぎると、次の行の文字と重なったりするので注意してください。

20160617_3

リンクの下線とリンクの文字との重なりが解消されました。ついでに、マウスが乗ったら色が変わるように a:hover の設定もしましょう。

自分のブログのデザインにあった色を指定すればよいでしょう。

20160617_4

border-bottom で色を指定しないと、下線だけ黒のままになります。どのようにデザインするのかで変わってくると思いますが、マウスが乗ったときに下線の色も変更したい場合は、color と border-bottom で色を統一するようにしてください。

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

スポンサーリンク

Comment

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

CAPTCHA


TOP