ナビゲーションを全てGIFなどの画像を切り貼りして作るのではなく、CSSにて背景を設定し、リンクはテキストで表示したいと思います。
この際に、ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが、リンク済の場合色が青く変わってしまい、テキストが読めなくなります。
テキスト部分を常に白色になるようにしたいのですが、どうすればよいでしょうか。
「CSSにて背景を設定し~ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが~」ということは、
既に一部はCSSを使用されているということでよろしいのでしょうか?
もっとも簡単な方法について書きます。
1.ナビゲーション部分のHTMLから「<a href="~">」の部分を右クリックします
2.「CSSスタイル」から「新規作成」を選びます
3.「セレクタタイプ」から「クラス」を選びます
4.「名前」にクラス名を入れます(ここでは例として「.navi_link」にします)
5.「定義場所」は「現在のドキュメントのみ」にします
(既に使用しているCSSファイルがあれば、それを指定)
5.「タイプ」内「カラー」で文字色(白・#FFFFFF)を選びます
6.すると、HTMLが「<a href="~" class="navi_link">」となるので、他のナビゲーション部分の「<a href="~">」内へもこの「 class="navi_link"」の部分をコピー&ペーストします
ここまでで、CSSとしては次のものが自動作成されているはずです。
.navi_link {
color: #FFFFFF;
}
これを次のように書き換えます。
.navi_link:link,
.navi_link:visited,
.navi_link:hover,
.navi_link:focus,
.navi_link:active {
color: #FFFFFF;
}
セレクタ(.navi_link:~の部分)はこの順番で書く必要があります。
以上でナビゲーション部分のリンクの文字色が白くなります。
HTMLがどのようになっているのかわからないので、的確な回答が不可能である点、ご了承下さい。
http://www.tohoho-web.com/css/reference.htm#visited
ページ全体であれば、cssで
A:link { color: white; }
A:visited { color: white; }
A:active { color: white; }
A:hover { color: white; }
にすればよいかと思います。
ナビゲーション部分だけであれば、ナビゲーション部分のリンクにclass(例えばnaviというclass)をつけて、
a.navi {color: white;}
でよいのではないでしょうか。
すみません。
当方がCSS初心者のためイマイチ分かりませんでした。
しかしながら、便利なWEBサイトを教えて頂きありがとうございます!
「CSSにて背景を設定し~ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが~」ということは、
既に一部はCSSを使用されているということでよろしいのでしょうか?
もっとも簡単な方法について書きます。
1.ナビゲーション部分のHTMLから「<a href="~">」の部分を右クリックします
2.「CSSスタイル」から「新規作成」を選びます
3.「セレクタタイプ」から「クラス」を選びます
4.「名前」にクラス名を入れます(ここでは例として「.navi_link」にします)
5.「定義場所」は「現在のドキュメントのみ」にします
(既に使用しているCSSファイルがあれば、それを指定)
5.「タイプ」内「カラー」で文字色(白・#FFFFFF)を選びます
6.すると、HTMLが「<a href="~" class="navi_link">」となるので、他のナビゲーション部分の「<a href="~">」内へもこの「 class="navi_link"」の部分をコピー&ペーストします
ここまでで、CSSとしては次のものが自動作成されているはずです。
.navi_link {
color: #FFFFFF;
}
これを次のように書き換えます。
.navi_link:link,
.navi_link:visited,
.navi_link:hover,
.navi_link:focus,
.navi_link:active {
color: #FFFFFF;
}
セレクタ(.navi_link:~の部分)はこの順番で書く必要があります。
以上でナビゲーション部分のリンクの文字色が白くなります。
HTMLがどのようになっているのかわからないので、的確な回答が不可能である点、ご了承下さい。
出来ました!
上記の説明をそのまま行ったら やりたいようになりました!
DWにてCSSを自動生成するクセが着くとなかなかこうした部分が勉強不足になりがちです。
有難う御座いました!
出来ました!
上記の説明をそのまま行ったら やりたいようになりました!
DWにてCSSを自動生成するクセが着くとなかなかこうした部分が勉強不足になりがちです。
有難う御座いました!