• ベストアンサー

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

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

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

  • ベストアンサー
  • starflora
  • ベストアンサー率61% (647/1050)
回答No.4

    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
質問者

お礼

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

その他の回答 (3)

  • usawing
  • ベストアンサー率31% (76/239)
回答No.3

下の方に補足致します。 私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。 HTMLソースを開くと、あれこれ書いてあると思いますので、 </TITLE>の後に、 <STYLE TYPE="text/css"> <!-- A:link { color: blue;} A:hover { color: red;} --> </STYLE> を貼り付ければ、リンクを張っている部分が青に、カーソルをあわせた時が赤になるようになっています。 {color:○○○;} ○○○の部分にカラーネーム(redや、blueなど)または、カラーコード(#ff0000や、#0000ffなど)を入れることで色の指定が出来ますので、好きな色に指定し直してくださいませ。 #>NIGHT2000さん。 勝手にソースをコピーして書かせていただきました。

miharin
質問者

お礼

ありがとうございました。 文字の色が変わるようになりました。

noname#45976
noname#45976
回答No.2

下で回答した者です^^; 勢いあまって、リンクのアンダーラインまで操作してしまいました。 以下のソースで充分です。 <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
質問者

お礼

すみません、少しやってみたら、できました。 ありがとうございました。

noname#45976
noname#45976
回答No.1

こんな感じですね^^ 重要なのは、<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
質問者

お礼

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

関連するQ&A

  • ホームページ上でマウスがリンクする文字の上に行くと色が変わるのは?

    初心者で、ホームページビルダー2001を使っています。ホームページ上でマウスがリンクする文字の上に行くと文字(画像ではなく文字です)の色が変わるのは・・・どう言う名前で、どの様にすれば出来るのでしょうか?また、データ-はたくさん必要としますか?宜しくお願い致します。

  • ホームページを製作する方法

    現在ホームページビルダで自分の店のページを作っています。 デザインはやはり素人が作ったんだなーっていうページだと思いますが、気になる点が、ロゴの文字って文字入力だけで変えることが出来たりしないのでしょうか?例えばエクセルではロゴを作ったあとでもそのロゴの文字を簡単に変更できます。しかしホームページビルダーだと 違うロゴに代えたい時にはもう一度作り直さないといけないようです。 なにか良い方法はないものでしょうか?

  • リンクを張った文字の色を変えない方法

    ホームページ・ビルダー8でのホームページをを作成しようと取り組んでいます。 メニューのページに項目を書き入れトップページとしています。そのトップページから他のページ(項目)にリンクを張った時、リンク元のメニューページの項目のフォントの色が青色に変わります。 元のフョントの色を変色させない方法が分かりません。もちろんリンク元のフォント色はクリックすれば変色しますが、クリックする前は元のフォント色を持続させたいのですが、教えてください。 表現が適当で無いかもしれませんが、よろしくお願いします。

  • ホームページビルダー10 リンク色

    こんにちわ  いつもお世話になっています。さっそく早速質問です がリンクの色というものがありますよね、サイトによ っては変わるとこもあるとおもいますが まだクリックしてないリンクには 青  クリックしたリンクの色は 赤みたいないろ それで質問なんですが 文字にリンクを挿入します そしたらページ編集画面では普通に青色をしていま す。しかしブラウザでみたりプレビューでみたりする と リンクが押されてたような赤い色でリンクがでて きます。もういちどリンクを 解除して再挿入しても だめでした。ホームページビルダーはまだ初心者に近 いのでわかりやすい説明をお願いします><

  • カーソルを当てると文字色が変わる方法は?

    よろしく。質問タイトル通りです。リンクの所の文字にカーソルを持ってくると色が変わる方法です。 ホームページビルダー7を使用してます。一応やり方として [表示]-[スタイルシート マネージャー]で表示して、[追加]をクリックし、[スタイルの設定]ダイアログの[HTMLタグの候補]を[マウスが上にあるリンク A:HOVER]を選択し、あとはリンクをポイントしたときに変更させたい色を指定。([カラーと背景]タブの[前景色]で文字の色が変わるはず。)を設定してOKをクリックしても反映されません。何か、抜けてますでしょうか?

  • ホームページビルダでリンク貼る時に・・・

    ホームページビルダーを使っています。 テキストでのリンクを作り、その文字の上にマウスが来た時にその色が変わるような設定を作りたいのですが、どうすればよろしいでしょうか? 画像が変わる設定しか分かりません。。。 よろしくお願いします。

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

    以前に同じ質問内容が掲載されておりましたので(http://oshiete1.goo.ne.jp/kotaeru.php3?q=169797)、ご回答の通り設定をしたのですが結果がうまくいきません。どなたか、原因を教えて下さい。前回質問者と同様ホームページビルダーV6.5を使用しております。 ・・・・・・・・・・・・・・・・・・・・・・ 【ページ編集】タグにリンクする文字を黒で入力しました。 リンク設定後【ページ編集】タグの色が黒から青にかわり【プレビュ】タグでは「紫」が表示されていました。 私の色の希望はリンク文字は黒、ポインタが触れると赤です。 ここで【HTMLソース】タグの</TITLE>の後に以下を貼り付けました。 <STYLE TYPE="text/css"> <!-- A:link { color: #000000;} A:hover { color: red;} --> </STYLE> その結果、【ページ編集】タグのリンク文字は黒だったのですが、肝心の【プレビュ】タグを見ると、リンク文字は「紫」ポイントすると「赤」です。 他の色で試してみたのですが【プレビュ】タグを見ると、リンク文字は「紫」を表示します。 長々な質問内で申し訳ございませんが、この原因をどなたか教えてください。 よろしくお願いします。

  • ホームページビルダー11 で セル にリンクは張って、マウス が上にあ

    ホームページビルダー11 で セル にリンクは張って、マウス が上にある時にセル全体の色を変えたいんです。セルの中には文字が入っているので文字の色を変える方法はわかるのですが、セル全体は無理なのでしょうか。 あまりくわしくないのでスタイルシートの説明とかを見てもよくわかりません。 少し詳しくわかりやすく教えていただけませんか? 1日でも早く作成したいので、宜しくお願いします。

  • ホームページビルダー9.0のリンク設定

    ホームページビルダー9.0を使用しています。 リンクを設定した項目Aの上に、マウスが載った時、文字の色を赤に変えるには、どう設定すればよいでしょうか?宜しくお願いします。

  • リンクを貼ると指定した文字の色が変わってしまいます

    ホームページビルダー使用初心者です。ホームページビルダー11を使っています。文字の色が指定してあるのですが(赤)、リンクを貼ってプレビュー確認すると色が変わっています(びみょーなピンク)。他のリンクを貼らない文字と一緒に色を統一してあるので色が変わらないようにしたいのですが、どうしてよいのかわかりません。。ご存知の方いらしたら教えてください。