私の関わりのある法人
ksbutton.png omemebuttan.png sowerbuttan.png
※このブログに書いていることは、私の関わりある法人の意見ではなく、
 あくまでも、私個人の意見です。

2011年03月29日

Webページのリンクの文字列の色を変えたい(html css)

 現在ホームページ作りをしています。

 リンクの文字列を、普段は黒色にしていて、マウスカーソルを上に持って来た時にだけ赤に変わるようにしたいと思っています。ホームページ全体をそうするために、スタイルシートで他のページも同じようにしたいと思っています。

 index.htmになる予定だけれでもまだ公開はしていないパイロット版がこんな感じです。

http://omemedo.tanba-sasayama.com/new/omemedouindextest1.htm

 唯一リンクを貼っている上の方の「ネットショップ(PC)」という所が一般的なリンクの色、青になっています。

参考
外部ファイルにまとめて設定する

  スタイルシートにはこう記述しています。

「/* リンクの文字の色を変える* /


/**/
(これでhtmlが見えるかな。本当は/*をつけていません・・・やっぱり見えませんね)

 それ以外は何も記述していません。

 何か、根本的なところがわかってないような気もしますが、またどなたかわかる方教えて頂けたらありがたいです。

posted by kingstone at 14:59| Comment(8) | TrackBack(0) | ホームページ作り | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
stylesheet.cssの方に

a:link { color: #000000; }
a:hover { color: #ff0000; }
a:visited { color: #000000; }
a:active { color: #ff0000; }

の4行を書き加えられるとできそうな気がするんですが、どうでしょうか。
詳しく知っているわけでないので、できなかったら申し訳ないです。
Posted by S at 2011年03月31日 10:44
Sさん、ありがとうございます。

早速やってみます。

しかし根本的にそのコードの前後に全体を「これはこういうファイルだよ」という宣言と言うか、そんなものが必要な気がするのですが、そこんとこがよくわかってないんですよね。例えばhtmlだと<html></html>みたいな。

Posted by kingstone at 2011年03月31日 10:54
今やっと気づいたのですが、私がブログエントリの中に書いたhtmlがhtmlと認識されて、エントリ上は見えなくなり、その効果が後ろの文に出ている(マウスカーソルが来ると赤色になる)のですね。知らなかった。面白〜〜い。
面白いからこのままにしておこう・・・でもhtmlは見えた方がいいか・・・
Posted by kingstone at 2011年03月31日 10:59
Sさん、どうもです。

教えて頂いたコードを入れてみました。(ハードディスク内のものだけです。公開はしていません。)すると

1.リンクの文字列は黒色になった(成功)

2.マウスカーソルが上に来ると赤に変化するところも1つだけあった。(http://omemedo.tanba-sasayama.com/で言うと「東北関東大震災への支援活動」のところ。しかしリンク先に飛んでまた戻って来たら今度は変化しなくなった)

3.赤く変色する文字列が変わった。(「東北関東大震災への支援活動」は黒のままで「ebook ダウンロードサイト」が変化するようになった)

ということが起きました。面白いですね。「黒で変化なし」だと少し困るのでまだ公開のほうへは持っていかずに、もう少し研究します。また何かわかることがあったら教えて下さい。

Posted by kingstone at 2011年03月31日 11:23
Sさん、どうもです。

私は公開したつもりはなかった(!?)のですが、http://omemedo.tanba-sasayama.com/で公開されているようです。自分がいったいどんな操作をしたのかわからないと言う・・・・

で、「画面は黒字」で「カーソルを置くと赤くなる」は「ほとんどの」リンクでできています!
しかしできていないのもあると言う・・・なぜか最初にできた「ebook・・・」のことろができてなかったり。

う〜〜む、ですが、まっいっかあ、です。しかし、また何かわかることがありましたらお教え下さい。

Posted by kingstone at 2011年03月31日 11:42
おっと、ちょっと説明が違っていました。

「マウスカーソルを置く」と変色するのではなく、「クリックする」と変色する、でした。

で、リンクの文字色はもともと青っぽいですね。
Posted by kingstone at 2011年03月31日 11:45
こんにちは。
私が順番を間違えて書いてしまったようですみません。
下記のように2行目と3行目入れ替えてもらうとで良いのではないかと思うのですが。

a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #ff0000; }
a:active { color: #ff0000; }

上から、

リンク文字色
訪問済み文字色
リンク文字列にカーソルの乗っている間の文字色、
リンクをクリックしてからページ遷移する間の文字色

です。
私もほぼ素人なので、おせっかいなコメでで更に混乱させてしまったかも知れずすみません。
Posted by S at 2011年03月31日 12:33
Sさん、どうもです。

できましたっ!!

ばっちりです!!

http://omemedo.tanba-sasayama.com/

これで他のhtmlファイルでもcssを読み込みコードを入れてやればいいわけですね。

本当にありがとうございました。

Posted by kingstone at 2011年03月31日 13:19
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック