役立ち情報

リンクの下線(アンダーライン)を消す方法を解説【WordPress・アフィンガー6】

悩んでいる人
リンクの下線があると、デザイン的に悪い。リンクの下線を消したい!

WordPressでリンクを作ると、上記のようにリンク部分に下線が付きます。

気にならない方もいるかもしれませんが、見栄えが悪くなったり、ダサいと感じる方もいるため、できればない方が良いと思います。

今回は、リンクの下線(アンダーライン)の消し方について分かりやすく解説します。

本記事の内容

  • リンクの下線の消し方
  • CSSでリンクをカスタマイズする方法
リンクの下線がない方が見た目がスッキリし、サイトのデザインが保てます。
Tsukasano

リンクの下線を消す方法

リンクの下線を消す方法はいくつかあるのですが、

今回は最も簡単なCSSにコードを書き込む方法を紹介します。

(※本記事で紹介するコードを貼り付けるだけでOK)

やることは非常に簡単で1分程度で終わります。

作業はたった2STEP

  1. CSSコードをコピー
  2. コードを指定の場所に貼り付け

たったこれだけです。

それでは、早速始めましょう。

具体的な手順

1、CSSコードをコピーする

以下のコードをコピーしてください。

a {
text-decoration: none;
}

2、指定の場所にコードを貼り付け

まずはWordPressのダッシュボードを開きます。

ダッシュボード画面

開いたら、「外観」→「カスタマイズ」をクリックします。

カスタマイズ画面

メニュー内から「追加CSS」をクリックします。

追加CSSにコードを貼り付け

あとは、追加CSSの空白の欄に先ほどのコードを貼り付けするだけです。

終わったら、必ず「公開」をクリックしましょう。

これで完了です。

CSS追加後のリンク文字▼

リンク文字のカスタマイズ

先ほどのリンクの下線を消すCSSコードに、さらにコードを加えることで色々なカスタマイズができます。

例えば、

  • マウスポインターがリンク文字に乗った状態の場合→リンクの下線を付けるor消す
  • リンクの下線を破線にする
  • リンク文字と下線の間に余白を入れる

このような事もできるので、それぞれのコードを紹介します。

マウスポインターがリンク文字に乗った場合に下線を付ける

CSSコード

a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

マウスポインターがリンク文字に乗った場合に下線を消す

CSSコード

a:hover {
text-decoration:none;
}

リンクの下線を破線にする

CSSコード

a{
text-decoration:none;
padding-bottom:1px;
border-bottom:dotted2px#060;
}

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

CSSコード

a{
text-decoration:none;
padding-bottom:1px;
border-bottom:solid2px#060;
}

まとめ

個人的にリンクの下線はない方が見た目が良いと思います。

好みは人それぞれなので、好きなように自分のサイトをカスタマイズしましょう。

-役立ち情報
-