CSSでリンクの色や下線を消すなど、デザインを変更する設定【web】

スマホやパソコンでネットをしていると、当たり前のように使っているリンクテキスト。

この記事では、リンクテキストにcssを使って色をつけたり、装飾をする方法を紹介します。

デザイン次第でブログ・ホームページの回遊率やクリック数が変わるので、色々と設定を変えて試してみてください。

ウェブの「リンク」とは？
リンクテキストの色を変更する方法
リンクの下線の設定を変更
- リンクの下線を消す
- リンクの下線を表示させる
まとめ

ウェブの「リンク」とは？

「リンク」とは、インターネット上の特定の一部をクリックした時に、現在のページから他のページに移動できる機能。

みんなが当たり前のように使っている機能なのですが、意外とインターネットの最大の特徴とも呼ばれ、

１つのページからありとあらゆるページへ「つながる」ことが出来る機能です。

英語で「link」は、接続や繋がり・つなぎ目などの意味があります。

詳しくは

Check!

: 【web】リンクの貼り方いろいろ【初心者向け】

続きを見る

リンクテキストの色を変更する方法

リンクテキストの色の設定方法を紹介します。

リンクの色をCSSで変更

リンクの設定には<a>タグを使用し、飛び先のURLを「href」要素に指定します。

href：エイチレフ（Hypertext Reference ハイパーテキストリファレンスの略）

 html
<a href="https://hyakuyattsu.com/">別のページにジャンプ</a>

別のページにジャンプ

↑ 何もしなければ、サイトの初期設定の色のまま表示されます。

色を指定したい場合は、cssで<a>タグの色を指定します。

ピンク色に指定

 css
a { color:pink; }

別のページにジャンプ

htmlにcssを適用させる方法は↓

Check!

: 【初心者にも簡単】HTMLにCSSを適用する方法３種類まとめ

続きを見る

これだけでもリンク色の設定は可能ですが、さらに細かく

未訪問のリンク色
訪問済みのリンク色
マウスを乗せた時（ホバー）のリンク色
クリックした時のリンク色

の４つの状況に分けて指定することで、よりユーザーにわかりやすいリンクテキストに！

1.未訪問のリンク色

「未訪問のリンク」は、ユーザーがまだ訪れていないページへのリンク。

初見のサイトでのリンク色は、全てこちらの「未訪問のリンク色」が表示されています。

「未訪問のリンク色」の設定には「a」の後に:linkを付け、「a:link」と設定します。

 css
a:link { color:green; } // 未訪問リンクの色を「green」にする。

未訪問リンクの場合は緑色に、他は初期設定

2.訪問済みのリンク色

「訪問済みのリンク」は、ユーザーがすでに１度訪れたページへのリンクです。

「訪問済みのリンク色」の設定にはaの後に:visitedを付け、「a:visited」と設定します。

 css
a:visited { color:orange; } // 訪問済みリンクの色を「orange」にする。

訪問済みリンクの場合はオレンジ色に、他は初期設定

3.マウスを乗せた時（ホバー）のリンク色

リンクテキストにマウスを乗せた時（ホバー）に色を変更することも出来ます。

「ホバーした時のリンク色」の設定にはaの後に:hoverを付け、「a:hover」と設定します。

 css
a:hover { color:pink; } // マウスを乗せた時（ホバー）した時のリンクの色を「pink」にする。

ホバーした時だけピンク色に、他は初期設定

4.クリックした時のリンク色

4つ目はクリックした瞬間の色を指定します。

「クリックした時の色」の設定にはaの後に:activeを付け、「a:active」と設定します。

 css
a:active { color:gray; } // クリックした時のリンクの色を「gray」にする。

クリックした時だけグレーに、他は初期設定

全てをまとめて設定すると

紹介した、

未訪問のリンク色
訪問済みのリンク色
マウスを乗せた時（ホバー）のリンク色
クリックした時のリンク色

の4つをまとめて指定。

 css
a:link { color:green; } // 未訪問リンクの色を「green」にする。
a:visited { color:orange; } // 訪問済みリンクの色を「orange」にする。
a:hover { color:pink; } // マウスを乗せた時（ホバー）した時のリンクの色を「pink」にする。
a:active { color:gray; } // クリックした時のリンクの色を「gray」にする。

実際に設定すると↓こちら。

未訪問は緑、訪問済みはオレンジ、マウスを乗せた時はピンク、クリックした時はグレーになるリンクテキスト

リンクテキストへ指定できる設定は、色だけでなくいろんなcssを組み合わせて指定することもできます。

次は、リンクテキストの下の線の設定を変更。

リンクの下線の設定を変更

続いては、リンクテキストの下線の指定をしてみましょう。

下線というのはこういうやつです。

下線を表示

何も設定を変更していないデフォルト状態では、リンクテキストには下線が表示されます。

リンクの下線を消す

リンクの下線を消すには<a>タグにcssで「text-decoration:（テキストデコレーション）」を選択し、「none」を指定することで下線を消すことが出来ます。

 css
a { text-decoration: none; }

リンクの下線を表示させる

逆に、リンクの下線を表示させるには「text-decoration:（テキストデコレーション）」を選択し、「underline」を指定します。

 css
a { text-decoration: underline; }

先程のリンク色設定の時の４つのシーンへの指定方法と組み合わせれば「マウスを乗せた時（ホバー）した時だけ下線を消す」といったような設定も可能です。

 css
a:link { text-decoration: underline }
a:visited { text-decoration: underline }
a:hover { text-decoration: none; } // マウスを乗せた時（ホバー）した時だけ下線を消す
a:active { text-decoration: underline }

マウスを乗せた時（ホバー）した時だけ下線を消すリンクテキスト