リンク文字色の変更

今回は、「リンク文字色」のカスタマイズ方法について説明します。

ページ全体のリンク文字色を変更するには

まず、リンク文字色をカスタマイズする方法として、ページ全体のリンク文字色を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集方法
リンク文字色を変更するには、スタイルシートを編集します。デフォルト・テンプレートの場合は、下記の部分を編集することで、ページ全体のリンク文字色を変更することができます。

＜スタイルシート＞

a { text-decoration: underline; } a:link { color: #8FABBE; } a:visited { color: #8FABBE; } a:active { color: #8FABBE; } a:hover { color: #006699; }

リンク文字色を指定するには、「未訪問のとき」や「訪問済みのとき」、「カーソルが重なったとき」、「クリックしたとき」など、リンクの状態ごとに指定することができます。

初期設定のリンク文字色は、「 color: #8FABBE;」などと指定されています。この「#8FABBE」という記述を編集することで、リンク文字色を変更することができます。

しかし、スタイルシートを見ていただくと、「a:link」や「a:visited」などに分かれていますね。それらがどういう機能をしているのか、それぞれ説明していきます。

リンクの状態

■ a
リンクの状態に関係なくスタイルを指定できます。ただし、下記の擬似クラスでスタイルが指定されている場合は、その指定が優先されます。

擬似クラス	意味
a:link	未訪問のリンク
a:visited	訪問済みのリンク
a:hover	カーソルが重なったときのリンク
a:active	クリックしたときのリンク

擬似クラスとは、下記のようにHTMLなどでは表記できない状態をクラスセレクタに見立てたものです。

■ a:link
リンク先が未表示の状態です。
文字色が未指定の場合は、青色で表示されます。

■ a:visited
リンク先が表示済みの状態です。
文字色が未指定の場合は、紫色で表示されます。

■ a:hover
リンクにマウスカーソルが重なったときの状態です。

■ a:active
リンクをクリックしたときの状態です。
文字色が未指定の場合は、赤色で表示されます。

文字色の指定方法

文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。

■ 16進表記で指定

color: #666666;

16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。

■ カラーネームで指定

color: blue;

16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。

HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

部分的にリンク文字色を変更するには

リンク文字色の変更について、ページ全体の文字を例として説明しましたが、部分的にリンク文字色を変更したい場合は、その該当箇所で

.○○○ a:link { color: #8FABBE; }

というように追記することで変更できます。

例えば、ブログタイトルのリンク文字色を変更したい場合は、下記のソースを追加します。

＜スタイルシート＞

#banner a { text-decoration: none; } #banner a:link { color: #8FABBE; } #banner a:visited { color: #8FABBE; } #banner a:active { color: #8FABBE; } #banner a:hover { color: #006699; }

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

以上、リンク文字色のカスタマイズ方法について説明しました。
是非、活用して、好みの文字色にカスタマイズしてください。

[次の講義へ] → リンク文字の下線を表示・非表示

ブログランキングに参加中です。応援お願いします。