MB-Support

パソコン初心者のサポートページ

リンクの文字色を変更する方法

 デフォルトの状態では、過去にアクセスしたページと、まだアクセスしていないページへのリンクの表示が異なります。これはブラウザの履歴を参照して色分けされます。


前回はリンクされている文字の下線を消してみました 。このページでは、リンクされている文字色を変更してみます。 <a href=""> 〜 </a> で囲まれた文字には、下線が付くだけでは無く、色も制御されます。通常は青で、リンク先のページを閲覧した場合は小豆色に変わります。 (以下のリンクはサンプルのため、強制的に色を表示しています)


リンク先をまだ見ていない場合は青色

すでにリンク先を見た場合は小豆色



これは、閲覧者にとって便利な機能で、青文字は「リンクがここにあるよ」と分かりやすく教えています。 また、小豆色は「リンク先のページは既に閲覧したよ」と教えています。ブラウザは何で判断しているのかと言うと、キャッシュと呼ばれる記憶域です。

Internet Explorer ( インターネット エクスプローラ ) では、「ツール」→「インターネットオプション」で「履歴の削除」を左クリックすると、既に閲覧したページへのリンクも、青文字 ( つまり未読 ) に変更されます。



ホームページを閲覧する側にとっては便利な機能ですが、製作者としてはデザイン上、リンクの文字色を統一したいと望む人もいるでしょう。 そんな時は以下のスタイルを <head> 〜 </head> の間に付け足します。


HTMLソース(メモ帳)

<style type="text/css">
<!--
a:link  { color : 色指定; }
a:visited  { color : 色指定; }
-->
</style>


未読のリンク文字の色は a:link で指定、既読のリンク文字の色は a:visited で指定します。 次の例では、未読、既読ともに黒 ( #000000 ) を指定して、通常の文章と同じ表示にしてみました。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
<style type="text/css">
<!--
a:link { color : #000000; }
a:visited { color : #000000; }
-->
</style>
</head>
<body>
<p><a href="ページアドレス">リンクが貼られている文字</a></p>
</body>
</html>

ブラウザ


前回紹介した、 リンクされている文字の下線を消す 方法も加えると次の様になります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
<style type="text/css">
<!--
a { text-decoration:none; }
a:link { color : #000000; }
a:visited { color : #000000; }
-->
</style>
</head>
<body>
<p><a href="ページアドレス">リンクが貼られている文字</a></p>
</body>
</html>

ブラウザ


この設定は、 ページの背景色を変更する で説明した様に、外部スタイルシートを利用した方が便利です。 右は、ページの背景色を黒 ( #000000 ) に設定する内容ですが、その下に、


body	{
	background-color:#000000;
} 
a	{
	text-decoration:none;
}
a:link	{
	color : #000000;
}
a:visited	{
	color : #000000;
} 

と付け足す事で、このスタイルシートを読み込んだ全てのページで、リンクテキストを黒に統一できます。 もっと詳しく調べるには以下。

a href に関する疑似クラス




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項