普段、パソコンやスマホでインターネットをしていると、当たり前のように使っているリンクテキスト。
そのリンクテキストにcssを使って色をつけたり、装飾をしたりできる設定方法をご紹介します。
リンクテキストのデザイン1つでブログやホームページのセッション数・回遊率が変わるので、色々と設定を変えて試してみてはいかがでしょうか。
リンクタグ<a>とは
リンクタグとは、インターネット上のコンテンツの特定の一部をクリックした時に、現在閲覧中のページから、他のページに移動できるようにする技術です。みんなが当然のように使っている機能なのですが、意外とインターネットの最大の特徴とも呼ばれ、1つのページからありとあらゆるページへ「つながる」ことが出来る機能です。
リンクにも色々種類があります。リンクの種類については下記の記事で詳しく説明しております。
-
-
【web】リンクの貼り方いろいろ【初心者向け】
続きを見る
リンク色の変更
それではリンクテキストの色の設定方法をご紹介します。
リンクの設定には<a>タグを用い、飛び先のURLを「href(エイチレフ:Hypertext Reference ハイパーテキスト リファレンスの略)」要素に指定します。
html
<a href="https://hyakuyattsu.com/">別のページにジャンプ</a>
別のページにジャンプ
リンクテキストの設定を何もしていなければ、サイトのデフォルト設定のまま表示されます。
色を変えようと思うとcssでリンクの<a>タグの色を指定します。
css
a { color:pink; }
別のページにジャンプ
リンク文字をピンク色に変更してみました。
htmlにcssを適用させる方法はこちらの記事でご紹介しています。
-
-
【初心者にも簡単】HTMLにCSSを適用する方法3種類まとめ
続きを見る
これだけでもリンク色の設定はできるのですが、さらに細かく4つのシーンに分けてリンクテキストをそれぞれの色を設定することも出来ます。
1.未訪問のリンク色
未訪問のリンクとは、ユーザーがまだ訪れたことのないページへのリンクです。
初見のサイトでのリンク色は基本こちらの「未訪問のリンク色」が表示されていることになります。
「未訪問のリンク色」の設定にはaの後に「:link」を付け、「a:link」と設定します。
css
a:link { color:green; } // 未訪問リンクの色を「green」にする。
2.訪問済みのリンク色
訪問済みのリンクとは、ユーザーがすでに1度訪れたページへのリンクです。
「訪問済みのリンク色」の設定には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」を指定することで下線を消すことが出来ます。
cssa { text-decoration: none; }
リンクの下線を表示させる
逆に、リンクの下線を表示させるには「text-decoration:(テキストデコレーション)」を選択し、「underline」を指定します。
css
a { text-decoration: underline; }
先程のリンク色設定の時の4つのシーンへの指定方法と組み合わせれば「マウスを乗せた時(ホバー)した時だけ下線を消す」といったような設定も可能です。
css
a:link { text-decoration: underline }
a:visited { text-decoration: underline }
a:hover { text-decoration: none; } // マウスを乗せた時(ホバー)した時だけ下線を消す
a:active { text-decoration: underline }
マウスを乗せた時(ホバー)した時だけ下線を消すリンクテキスト
まとめ
いかがでしたでしょうか。
リンクテキストにcssを使って色をつけたり、装飾をしたりできる設定方法をご紹介しました。
一言で「リンク」と言っても4つのシチュエーションがあります。
- 未訪問のリンク
- 訪問済みのリンク
- マウスを乗せた時(ホバー)した時のリンク
- クリックした時のリンク
それぞれのシチュエーションによってデザインを変え、ユーザーをわかりやすく導くことがサイト作りには重要です。
CSSを使えばまだまだ無限にいろんな設定のリンクテキストを作ることが出来ます。
リンクを制するものはサイトを制す!
と私(daruma108)は勝手に思っていますが、リンクテキストのデザイン1つでブログやホームページのセッション数・回遊率が変わることもあるので、色々と設定を変えて試してみてはいかがでしょうか。
最後までご覧いただきありがとうございます。
- WEBやプログラミングの知識をつけたい
- でも、スクールの学費は高すぎる
という方には、安価で始められる「侍テラコヤ」を1度チェックしてみて!
口コミや評判、実際に入会してみて気づいた注意点を紹介!
-
-
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
続きを見る
こちらの記事もリンク設定の参考になるかもしれません。よければ合わせてご覧ください。
-
-
【web】リンクの貼り方いろいろ【初心者向け】
続きを見る
- WEBやプログラミングの知識をつけたい
- でも、スクールの学費は高すぎる
という方には、安価で始められる「侍テラコヤ」を1度チェックしてみて!
口コミや評判、実際に入会してみて気づいた注意点を紹介!
-
-
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
続きを見る