人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

WEBサイトのナビゲーションをドリームウィーバーを使って作成しております。
ナビゲーションを全てGIFなどの画像を切り貼りして作るのではなく、CSSにて背景を設定し、リンクはテキストで表示したいと思います。
この際に、ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが、リンク済の場合色が青く変わってしまい、テキストが読めなくなります。
テキスト部分を常に白色になるようにしたいのですが、どうすればよいでしょうか。

1165959425
●拡大する

●質問者: tokyo1981
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS GIF webサイト カラー テキスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● hokuraku
●20ポイント

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;}

でよいのではないでしょうか。

http://www.tohoho-web.com/css/basic.htm#Class

◎質問者からの返答

すみません。

当方がCSS初心者のためイマイチ分かりませんでした。

しかしながら、便利なWEBサイトを教えて頂きありがとうございます!


2 ● wizemperor
●50ポイント ベストアンサー

「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を自動生成するクセが着くとなかなかこうした部分が勉強不足になりがちです。

有難う御座いました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ