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を使うと、リンクの下線を消したり、マウスオーバー時に付けたり、文字との間に余白を入れることができます。あとはアイデア次第です。いろいろと試してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート