OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

ホームページ上の文字の色を変える方法

  • すぐに回答を!
  • 質問No.169797
  • 閲覧数240
  • ありがとう数5
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 85% (191/223)

今、ホームページビルダーを使ってホームページの作り直しをしています。
それで、ページ上の普通の文字(ロゴなどではないと言う意味)の上に、マウスを当てると、文字の色が変わるようにしたいのです。それをクリックすると、リンクする設定になっている文字に対してです。
いったい、それは、どのようなことをしたらそうなるのでしょうか?素人には無理でしょうか?
自分なりに、それはスクリプトなのではないかな、と考え、それを説明している無料サイトなども見ているのですが、「文字の色を変える」などというのは見つからず、今ひとつ分かりません。
もし、よければどなたか、教えてください。
通報する
  • 回答数4
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.4
レベル13

ベストアンサー率 61% (647/1050)

 
  hover のスタイルシートでの色指定は、すでに答えが出ています。しかし、次のようなヴァリエーションがあります:
 
  1)
--------------------------------------
 
</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 の色指定はできません。それも好みの色にしようとすると、次のようにします:
 
  2)
----------------------------------------
 
</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>

  このように、スタイルシートでは、リンク、Vリンクの色指定はせず、<BODY>タグのなかで、リンク、訪問済みリンクの色指定をすると、この指定の色にリンクや訪問済みリンクの色が指定されます。無論、この場合も、スタイルシートで色指定した文字は、リンクであっても、色は指定通りです。そして、hover は有効です。(実際にコピーして確認してみられると分かります。これは、通常のリンクの色指定と、スタイルシートでの色指定などの優先順位の違いを利用しています。ブラウザーにより、あるいは説明通りに表示されない可能性がありますが、スタイルシートの hover 指定が可能な場合、上の方法も可能なはずです)。
 
お礼コメント
miharin

お礼率 85% (191/223)

本当にありがとうございました。
色の設定もできました。
ただ、test1からtest4までの記述があり、ホームページ作成サイト上に
出てきますよね。それは、なんのために出すのでしょうか?
これで、確認しみて必要なくなったら消す、というものか、または、これをコピーして張り付けて文字を打ち直して使う物か、と想像はしいています。
本当にHP初心者なもので、1つやると、また1つ疑問が出て来るという状態です。
投稿日時 - 2001-11-21 07:51:26
-PR-
-PR-

その他の回答 (全3件)

  • 回答No.1

こんな感じですね^^ 重要なのは、<STYLE TYPE="text/css">と</STYLE>で囲まれた部分です。ここで、リンクにマウスカーソルがのったときの色の指定などを行っています。 カラーのblueとかredとかを変更すれば、いろいろ試せますよ^^ <HTML> <HEAD> <TITLE>色替えテ ...続きを読む
こんな感じですね^^

重要なのは、<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>
お礼コメント
miharin

お礼率 85% (191/223)

ありがとうございました。
ところで、すみませんが、これをどこに書くのでしょう?
(ほんっとに、申し訳ありません、恥ずかしい限りです)
(1)HTMLソースを開いてそこに、直接書き込む
(2)スクリプトを設定したいところをドラッグして<挿入>→<スクリプト>を開いて書き込む
この2つあたりがそうではないか?と見当つけてるんですが……?
まったく初心者なんですけど、仕事上HP作成しなければならず、しかも、
よせばいいのにスクリプトに興味を持ってしまいましって。近くに誰も分かる人がいないのです。
投稿日時 - 2001-11-16 20:16:59
  • 回答No.2

下で回答した者です^^; 勢いあまって、リンクのアンダーラインまで操作してしまいました。 以下のソースで充分です。 <HTML> <HEAD> <TITLE>色替えテスト</TITLE> <STYLE TYPE="text/css"> <!-- A:link { color: blue;} ...続きを読む
下で回答した者です^^;
勢いあまって、リンクのアンダーラインまで操作してしまいました。

以下のソースで充分です。

<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>
お礼コメント
miharin

お礼率 85% (191/223)

すみません、少しやってみたら、できました。
ありがとうございました。
投稿日時 - 2001-11-16 20:59:12
  • 回答No.3
レベル11

ベストアンサー率 31% (76/239)

下の方に補足致します。 私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。 HTMLソースを開くと、あれこれ書いてあると思いますので、 </TITLE>の後に、 <STYLE TYPE="text/css"> <!-- A:link { color: blue;} A:hove ...続きを読む
下の方に補足致します。
私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。

HTMLソースを開くと、あれこれ書いてあると思いますので、
</TITLE>の後に、
<STYLE TYPE="text/css">
<!--
A:link { color: blue;}
A:hover { color: red;}
-->
</STYLE>
を貼り付ければ、リンクを張っている部分が青に、カーソルをあわせた時が赤になるようになっています。
{color:○○○;}
○○○の部分にカラーネーム(redや、blueなど)または、カラーコード(#ff0000や、#0000ffなど)を入れることで色の指定が出来ますので、好きな色に指定し直してくださいませ。

#>NIGHT2000さん。
勝手にソースをコピーして書かせていただきました。
お礼コメント
miharin

お礼率 85% (191/223)

ありがとうございました。
文字の色が変わるようになりました。
投稿日時 - 2001-11-21 07:52:30
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ