CSSでリンクの下線を消したり点線にする方法

WordPress個別サポート

リンクには下線が付くのが一般的ですが、リンクの下線を消したり、文字と下線の間に余白を入れたり、下線を点線にしたいこともあります。

下線付のリンク
下線付のリンク

ここでは、CSSを使って下線をいろいろと設定する方法を紹介します。

リンクの下線を消す

下線を消すにはCSSで「text-decoration: none;」を指定します。

/* リンクの下線を消す */
a {
    text-decoration: none;
}

これで、リンクの下線が消えます。

リンクの下線が消える
リンクの下線が消える
下線が消えない場合はCSSセレクタに注意してください。また、上記のCSSはサンプルです。実際のサイトで使うとすべてのリンクから下線が消えます。必要に応じてCSSセレクタを設定してください。よくわからない場合はWordPress個別サポートにご相談ください。

マウスオーバー時のみ下線を消す

通常時は下線を表示しておき、マウスオーバー時のみ下線を消すには「:hover」に対して「text-decoration: none;」を指定します。

/* マウスオーバー時のみリンクの下線を消す */
a:hover {
    text-decoration: none;
}

リンクにマウスオーバーしたときのみ、下線が消えます。

マウスオーバー時のみ下線を消す
マウスオーバー時のみ下線を消す

マウスオーバー時に下線を付ける

上記とは逆に通常のリンクに下線を付けず、マウスオーバー時に下線を付けるには、「:hover」に対して「text-decoration: underline;」を指定します。たとえば、次のようなCSSになります。

/* リンクの下線を消す */
a {
    text-decoration: none;
}

/* マウスオーバー時にリンクの下線を付ける */
a:hover {
    text-decoration: underline;
}

通常時は下線がありませんがマウスオーバーすると下線が付きます。

マウスオーバー時に下線を付ける
マウスオーバー時に下線を付ける

リンクの文字と下線に余白を入れる

リンクの文字と下線はピッタリ付いています。

リンクの文字と下線は付いている
リンクの文字と下線は付いている

文字と下線の間に余白を入れたい場合、通常の下線を消してリンクの枠線を設定し、リンクと枠線の間に余白を入れる方法があります。たとえば、次のようなCSSです。

/* リンクの文字と下線に余白を入れる */
a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: solid 2px #060;
}

これで、リンクの文字と下線の間に余白が入ります。

リンクの文字と下線の間に余白を入れる
リンクの文字と下線の間に余白
正確には「リンクの下線」ではないですが、見た目には十分だと思います。

上記のCSSの「padding-bottom」が文字の下余白のサイズです。また、「border-bottom」が下線のスタイル、太さ、色の設定です。自由に変更してみてください。

リンクの下線を点線に

上記のCSSのborder-bottomで指定した枠線のスタイル「solid」を「dotted」に変更すると、リンクの下線が点線になります。

/* リンクを点線に */
a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: dotted 2px #060;
}

リンクの下線が点線になります。

リンクの下線を点線に
リンクの下線を点線に

まとめ

このように「text-decoration」や「border-bottom」などのCSSを使うと、リンクの下線を消したり、マウスオーバー時に付けたり、文字との間に余白を入れることができます。あとはアイデア次第です。いろいろと試してみてください。

CSSの書き方