- ベストアンサー
ホームページ上の文字の色を変える方法
今、ホームページビルダーを使ってホームページの作り直しをしています。 それで、ページ上の普通の文字（ロゴなどではないと言う意味）の上に、マウスを当てると、文字の色が変わるようにしたいのです。それをクリックすると、リンクする設定になっている文字に対してです。 いったい、それは、どのようなことをしたらそうなるのでしょうか？素人には無理でしょうか？ 自分なりに、それはスクリプトなのではないかな、と考え、それを説明している無料サイトなども見ているのですが、「文字の色を変える」などというのは見つからず、今ひとつ分かりません。 もし、よければどなたか、教えてください。
- miharin
- お礼率85% (191/223)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
hover のスタイルシートでの色指定は、すでに答えが出ています。しかし、次のようなヴァリエーションがあります： １） -------------------------------------- </HEAD> <style type="text/css"> <!-- A:active {text-decoration: none; color: #ff0000} A:hover {text-decoration: none; color: #0000ff} .pink-text {text-decoration: none; color: #ffa0e0} .sky-text {text-decoration: none; color: #c0c0ff} .green-text {text-decoration: none; color: #007000} --> </style> ………… <a href="Test001.html">Test001</a><br> <a href="Test002.html" class="pink-text">Test002</a><br> <a href="Test003.html" class="sky-text">Test003</a><br> <a href="Test004.html" class="green-text">Test004</a><br> これは、何かといいますと、Link の色や、Visited の色は指定していないので、Test001 のリンクは、デフォルトの青が「リンク」で、赤紫が「訪問済み」の色になりますが、Test002, Test003, Test004 のリンクは、ピンク、空色、緑という風に、色指定ができます。リンクの文字を、普通の <font color="#">で色指定すると、リンクの色指定や、スタイルシートでの hover 色の指定は有効になりません。上のように、スタイルシートで、特定のリンクを色指定すると、文字に自由な色を付けることができ、しかも、hover 色が有効になります。 しかし、上の方法だと、Link や Visited の色指定はできません。それも好みの色にしようとすると、次のようにします： ２） ---------------------------------------- </HEAD> <style type="text/css"> <!-- A:active {text-decoration: none; color: #ff0000} A:hover {text-decoration: none; color: #0000ff} .pink-text {text-decoration: none; color: #ffa0e0} .sky-text {text-decoration: none; color: #c0c0ff} .green-text {text-decoration: none; color: #007000} --> </style> <BODY Link="#7040ee" Vlink="#009090"> ………… <a href="Test001.html">Test001</a><br> <a href="Test002.html" class="pink-text">Test002</a><br> <a href="Test003.html" class="sky-text">Test003</a><br> <a href="Test004.html" class="green-text">Test004</a><br> ………… </BODY> このように、スタイルシートでは、リンク、Ｖリンクの色指定はせず、<BODY>タグのなかで、リンク、訪問済みリンクの色指定をすると、この指定の色にリンクや訪問済みリンクの色が指定されます。無論、この場合も、スタイルシートで色指定した文字は、リンクであっても、色は指定通りです。そして、hover は有効です。（実際にコピーして確認してみられると分かります。これは、通常のリンクの色指定と、スタイルシートでの色指定などの優先順位の違いを利用しています。ブラウザーにより、あるいは説明通りに表示されない可能性がありますが、スタイルシートの hover 指定が可能な場合、上の方法も可能なはずです）。
その他の回答 (3)
- usawing
- ベストアンサー率31% (76/239)
下の方に補足致します。 私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。 HTMLソースを開くと、あれこれ書いてあると思いますので、 </TITLE>の後に、 <STYLE TYPE="text/css"> <!-- A:link { color: blue;} A:hover { color: red;} --> </STYLE> を貼り付ければ、リンクを張っている部分が青に、カーソルをあわせた時が赤になるようになっています。 {color:○○○;} ○○○の部分にカラーネーム（redや、blueなど）または、カラーコード（#ff0000や、#0000ffなど）を入れることで色の指定が出来ますので、好きな色に指定し直してくださいませ。 #>NIGHT2000さん。 勝手にソースをコピーして書かせていただきました。
お礼
ありがとうございました。 文字の色が変わるようになりました。
下で回答した者です＾＾； 勢いあまって、リンクのアンダーラインまで操作してしまいました。 以下のソースで充分です。 <HTML> <HEAD> <TITLE>色替えテスト</TITLE> <STYLE TYPE="text/css"> <!-- A:link { color: blue;} A:hover { color: red;} --> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <A HREF="test1.html">test1</A><br> <A HREF="test2.html">test2</A><br> <A HREF="test3.html">test3</A><br> <A HREF="test4.html">test4</A><br> </BODY> </HTML>
お礼
すみません、少しやってみたら、できました。 ありがとうございました。
こんな感じですね＾＾ 重要なのは、<STYLE TYPE="text/css">と</STYLE>で囲まれた部分です。ここで、リンクにマウスカーソルがのったときの色の指定などを行っています。 カラーのblueとかredとかを変更すれば、いろいろ試せますよ＾＾ <HTML> <HEAD> <TITLE>色替えテスト</TITLE> <STYLE TYPE="text/css"> <!-- A:link { color: blue; text-decoration: none; } A:hover { color: red; text-decoration: underline; } --> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <A HREF="test1.html">test1</A><br> <A HREF="test2.html">test2</A><br> <A HREF="test3.html">test3</A><br> <A HREF="test4.html">test4</A><br> </BODY> </HTML>
お礼
ありがとうございました。 ところで、すみませんが、これをどこに書くのでしょう？ （ほんっとに、申し訳ありません、恥ずかしい限りです） (1)ＨＴＭＬソースを開いてそこに、直接書き込む (2)スクリプトを設定したいところをドラッグして＜挿入＞→＜スクリプト＞を開いて書き込む この２つあたりがそうではないか？と見当つけてるんですが……？ まったく初心者なんですけど、仕事上ＨＰ作成しなければならず、しかも、 よせばいいのにスクリプトに興味を持ってしまいましって。近くに誰も分かる人がいないのです。
お礼
本当にありがとうございました。 色の設定もできました。 ただ、ｔｅｓｔ１からｔｅｓｔ４までの記述があり、ホームページ作成サイト上に 出てきますよね。それは、なんのために出すのでしょうか？ これで、確認しみて必要なくなったら消す、というものか、または、これをコピーして張り付けて文字を打ち直して使う物か、と想像はしいています。 本当にＨＰ初心者なもので、１つやると、また１つ疑問が出て来るという状態です。