リンクの色を変えよう！ ＣＳＳ入門－６

今回はリンクの色の設定をしてみましょう。
リンクの設定は、

/* ----------------- common ----------------- */

の下のほうにあると思います。

/* ----------------- common ----------------- */
・
・
a {	←	ここがリンク色の設定
color: #990000;	←
}	←
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline}

上のような感じです。
下のように、リンク色の設定が何もされていない場合もあるので、そのときは「color: #990000;」のような文を追記してください。

a { }	→	a {color: #990000; }	※　数字は色によって自由に変えてください

これでリンクの色の設定はおわり！
カラーコードを変えて、好きな色にしてみてください。
馴れてきた方には、簡単でしたね。 じゃぁ、もう少しいじってみましょうか？

---

上の設定では、リンクの色を一色にしか設定していませんが、「未訪問リンクの色」、「訪問済みリンクの色」、「リンクにマウスを重ねた時の色」も設定できます。

設定場所は上と同じです。

/* ----------------- common ----------------- */
・
・
a {
color: #990000;
}
a:link {text-decoration: none}	←	未訪問リンクの色
a:visited {text-decoration: none}	←	訪問済みリンクの色
a:hover {text-decoration: underline}	←	マウスを重ねた時の色

上の三つにそれぞれ色指定の文「color: #990000;」を追加しなければならないんですが、ちょっと注意してください。

まずは、「未訪問リンクの色」を変更してみます。

a:link {text-decoration: none}	a:link {この中を変更}
↓
a:link {text-decoration: none;	←	文末に「;」をつける
color: #FF0000;	←	追加（数値は自由）
}	←	消さないように注意

「;」が抜けても、最後の「}」が抜けても設定が反映されないので、ちょっとしたことですが、注意してください。

---

この要領で他の２つの色も変えてみます。

a:link {text-decoration: none;
color: #FF0000;
}
a:visited {text-decoration: none;
color: #00FF00;
}
a:hover {text-decoration: underline;
color: #0000FF;
}

3色の設定ともそれぞれ、「;」を足し忘れたり、「}」を消してしまわないように注意してください。
また、同じ設定内の、
「text-decoration: none;」はリンクの下線無し
「text-decoration: underline;」は下線有りということなので、「none」を「underline」に、「underline」を「none」に変更したりして、リンクの下線の有無を設定してください。

a:link {text-decoration: none;
color: #FF0000;
}
a:visited {text-decoration: none;
color: #00FF00;
}
a:hover {text-decoration: underline;
color: #0000FF;
}

---

入門１　記事の文字を変えてみよう

入門２　「タイトル」「サブタイトル」を変えてみよう

入門３　「文字のフォント」を変えよう！

入門４　タイトルに好きな「画像」を入れよう！

入門５　コメントの文字を変えよう！

入門７　スクロールバーの設定