訪問済みリンクを変える
上部
では、次にスタイルシートで訪問済みのリンクを変更する方法を説明するよ。
学
そういえば、リンクをクリックした後に戻ってみると、リンクの文字が紫色になる事ってありますよね。
上部
そうだね。その訪問済みリンクのデザインを変えるには、「a:visited」を使うんだよ。
例えば、訪問済みのリンクの文字を青色から変えたくない場合、スタイルシートに次のように書こう。
a:visited{color:#0000ff;}
学
なるほど!これもさっきの通常のリンク文字を変えた時と同じように、背景色を変えたり出来るんですよね。
上部
うん。さきほどと同じようにデザインを変更するとリンクだと気付かれない可能性もあるので気をつけようね。
学
では、僕の自己紹介でも訪問済みのリンク文字を変えてみます。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
background-color:#FFFF99;
border:1px solid #FF9900;
padding:0.3em;
}
h3{
font-size:13px;
background-color:#CCFFFF;
padding:0.2em;
}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
a:visited{color:#0000ff;}
学
訪問済みのリンク文字の色を青色にしてみましたよ。
学の自己紹介を新しいウィンドウで開く
一度クリックしたリンクも紫色にならなくなりましたよ〜!