リンクカラー（色）の変更*ブログ作成 navi

ブログカスタマイズを楽しむ。

ブログのカスタマイズでブログライフをもっと楽しむ。当サイトでは Web デザイナーが作成したブログ用のフリー素材もご用意していますので、どうぞお楽しみください。

ホーム > ブログカスタマイズ > カスタマイズ講座 > リンクカラー（色）の変更

リンクカラー（色）の変更

このページではブログやホームページなどの Web サイトにおける、リンクカラー（リンクの色）の変更方法を解説しています。

リンクカラーとは、現在ご覧頂いているページで言うなら「ブログ作成 navi」のような、クリックすることのできるハイパーリンクのテキストの色を指しています。

リンクカラー（色）のスタイルシートサンプル

解説はさておき、実際にリンクカラーをスタイルシート（CSS）で変更したサンプルをご覧ください。幾つかのサンプルをご覧頂くことで、スタイルシートでどういった設定（変更）ができるのか、どういった方法なのかを「なんとなく」でも結構ですのでご理解してみてください。

また、カラー（色）の変更だけではなく、その他の装飾（デコレーション）方法などもご確認ください。

スタイルサンプル１

訪問者に分かりやすくスタンダードなスタイルの設定。
※分かりやすいリンクカラーと言う意味ではありません。

/*リンクカラーの設定*/
a:link {
	color : #00f; /*青を指定*/
	text-decoration : underline; /*テキストにアンダーラインを指定*/
}

/*訪問済みリンクカラーの設定*/
a:visited {
	color : #000; /*黒を指定*/
	text-decoration : underline;
}

/*リンクにマウスカーソルが重なった時（マウスオーバー時）の設定*/
a:hover {
	color : #06f; /*薄い青を指定*/
	text-decoration : none; /*テキストのデコレーション無しを指定*/
}

/*リンクがクリックされた直後（アクティブ時）の設定*/
a:active {
	color : #6cf; /*水色を指定*/
	text-decoration : none;
}

サンプル１の表示結果です。リンクをクリックし現在のページへ戻ってくると「訪問済みカラー」の確認（青→黒）を行えます。

スタイルサンプル２

未訪問リンクと訪問済みリンクのグループ化。マウスオーバー時とアクティブ時のグループ化。

/*リンクと訪問済みリンクの設定*/
a:link , a:visited {
	color : #00f;
	text-decoration : none;
}

/*マウスオーバー時とアクティブ時の設定*/
a:hover , a:active {
	color : #6cf;
	text-decoration : underline;
}

サンプル２の表示結果です。リンクは未訪問・訪問済みに関係なく常に青のままです。
※ hover と active をグループ化することに大きな問題はありませんが、link と visited をグループ化する際は、ユーザビリティが低下するスタイル設定なので、用途を考慮する必要があります。

スタイルサンプル３

リンクの装飾（デコレーション）に変化を持たせたスタイルの設定。

a:link , a:visited {
	color : #fff;
	text-decoration : none;
	background-color : #00f; /*背景色を指定*/
}

a:hover , a:active {
	color : #00f;
	text-decoration : none;
	border-bottom : dotted 1px #00f; /*要素の下に 1px の点線を指定*/
	background : none; /*背景無しでリセット*/
}

サンプル３の表示結果です。

スタイルサンプル４

リンクに動きを持たせたスタイルの設定。

a:link , a:visited {
	color : #00f;
	text-decoration : underline;
}

a:hover , a:active {
	color : #00f;
	text-decoration : none;
	position : relative; /*ポジションを相対的に指定*/
	top : 1px; /*上から 1px を指定*/
	left : 1px; /*左から 1px を指定*/
}

サンプル４の表示結果です。

リンクカラー（色）の解説

上記したサンプルはあくまで一例に過ぎませんが、リンクカラーの色変更（リンクの装飾）を行う上で基本的な方法となります。

まずご理解して頂きたいのは「a:link」とは a（アンカー）要素へ疑似クラスの１つ「:link」を使いリンクへ装飾を行うセレクタです。その他の疑似クラス「:visited」「:hover」「:active」も同様で、リンクカラーの色変更（リンクの装飾）には a 要素に疑似クラスを用いたセレクタで設定を行います。

サンプルのソースのコメント（/**/）内にも記述しましたが、疑似クラスを使うことでそれぞれリンク部分の状態に合わせた設定を行えます。「:link」は通常時、「:visited」は訪問済み、「:hover」はマウスカーソルが重なっている時、「:active」はリンク部分がクリックされ実行されている時の状態となります。

また、疑似クラスを使わず a 要素をセレクタとし、リンク部分の共通設定を行うことも可能です。下のサンプルソースをご確認ください。

a {
	font-weight : bold; /*太字に指定*/
	text-decoration : underline;
}

a:link , a:visited {
	color : #00f;
}

a:hover , a:active {
	color : #6cf;
}

上のサンプルソースの表示結果です。

CSS の知識を深めていくことで、更に個性的なリンクの装飾も可能となりますが、ユーザー（訪問者）にとって未知の仕組み（リンクの設定）となることは常に意識してください。

ユーザーにとって『分かり辛い Web サイト』にならない範囲でカスタマイズを楽しんでください。

リンクカラー（色）関連記事

カスタマイズ講座に関連する記事（ページ）を随時追加していきますのでご期待頂けると嬉しいです。

ブログカスタマイズを楽しむ。