【HTML・CSS逆引き】訪問後のリンクの色を変える方法

 

よくWEBサイトでリンクをクリックして、ページを閲覧すると、リンクの色が青色から紫色に変っているということがありませんか?

これによりユーザーが同じページを何度も閲覧してしまうという誤操作を止めることができています。

この記事では、この動きの実装方法を紹介します。

ほぼコピペで実装可能なので、ぜひご利用ください。

 

目次

作成できるデザイン

 

リンクをクリックして、リンク先ページを閲覧すると、文字が紫色に変ります。

 

 

 

作成方法

 

下記のスタイルをお使いのスタイルシート(CSSファイル)にコピーするだけです。

  1. a {
  2.     color: #3583aa;
  3. }
  4. a:visited {
  5.     color: #788d98;
  6. }

※セレクタがaタグになっているので、特定のリンクのみに適応させたい場合は変更ください

 

コードの説明

 

では実際に使用したコードを簡単に説明します。

手順としては下記となります。

手順① リンクの文字を青色にする

手順② 訪問済みのリンクを青色→紫色に変更する

 

手順①:リンクの文字を青色にする

 

下記のようにリンクを表すaタグに対して文字の色を青色(#3583aa)に変更します。

  1. a {
  2.     color: #3583aa;
  3. }

 

手順②:訪問済みのリンクを青色→紫色に変更する

 

セレクタの後ろに「ユーザーがすでに訪問した」という条件を表す疑似クラス「:visit」をつけてあげることで、訪問済みのリンクのみを対象としてスタイルをつけることが可能です。

後は、文字色が紫色(#788d98)となるようなスタイルを記載すれば、設定は完了となります。

  1. a:visited {
  2.     color: #788d98;
  3. }

※手順①のコードより後に記載してください

 

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

本業はシステムエンジニアでKARTEのテクニカルサポートを担当。マーケティング・SNS・統計・イベント運営など多様な資格を20種以上所持。ゲーム友達が欲しい。

コメント

コメントする

目次