ホームページ作成でリンクテキストの色変更方法

前へ 次へ
このQ&Aのポイント
  • ホームページ作成初心者がリンクテキストの色を変える方法について教えてください。
  • 「ホバーをかける」操作を試したがうまくいかず、実際のホームページでは文字の色が変わらないか、パスワードを要求する画面が表示される。
  • パスワード付きリンクでなければ文字の色が多少変わるが、赤く表示されない。対策を教えてください。
回答を見る
  • ベストアンサー

ホームページ作成で、リンクテキストにマウスをあてると色が変わるようにするには？

ホームページ作成初心者です。 ちなみに「ホームページビルダー」を使用しています。 リンクテキストにマウスをポイントすると、ポイントしている間だけ赤く表示され、 さらにクリック後は紫色に表示されるホームページがよくあります。 パスワード付きリンクについて、それと同じ設定になるようにしたいのですが、 どうしてもうまくいきません。 調べてみたところ「ホーバーをかける」ということのようで、 「表示」　→　「スタイルシートマネージャー」　→　「追加」 →　「ＨＴＭＬタグの候補」　→　「マウスが上にあるリンク」　→　「色と背景」 →　「前景色」　→　「赤」　→　ＯＫ のように操作しました。 ＨＴＭＬソースの<HEAD>と</HEAD>の間には <STYLE type="text/css"> <!-- A:HOVER{ color : red; } --> </STYLE> と表示されています。 ところが、実際のホームページを開くと、ポイントしても文字が赤くならず、 クリックするとパスワードを要求する画面が出ます。 さらに、パスワード付きリンクでなければポイントの際に赤く表示されるのかと思い、 パスワードなしのリンクに変更した後、実際のホームページを開くと、ポイント しても文字の色は多少変わるものの、赤ではありません。 対策をご教示いただければ幸いです。

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

  • ベストアンサー
  • chikotto
  • ベストアンサー率46% (23/50)
回答No.2

htmlの記述のほうに問題があるかと思います。hrefがないですね。 ※タグの大文字・小文字は無視してください。小文字のほうが良いですが… <a href="#" class="hpb-vmenu1-link1" onclick="return _HpbPwdWnd(パスワードの設定);"> もしくは <a href="javascript:return _HpbPwdWnd(パスワードの設定);" class="hpb-vmenu1-link1"> にすると解決するかと思います。 補足として a:link { color:red; /*未訪問のリンク色*/ } a:visited { color:purple; /*訪問済みのリンク色*/ } a:hover { color:green; /*カーソルオン時*/ } a:active { color:blue; /*リンクをクリックしている状態*/ } で設定できます。 >ポイントしても文字の色は多少変わるものの、赤ではありません。 ※色の指定はいろいろと優先順位があるので、これより優先させてしまっている設定がある場合は色は変わりません。 （もしかしたらそっちが原因かもしれません）

mapooo
質問者

お礼

いろいろ試してみて、だんだんとわかってきました。 ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。 但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。 「href="hpb9tm06_3.css"」の部分は上記の設定に関係しているようで、これを削除すると背景の色が全て消え、文字色も変わった状態になりました。 「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。 後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。 親身のご回答ありがとうございました。

mapooo
質問者

補足

わかりやすいご回答、何度もありがとうございます。 href="#" の部分を挿入してみたら、パスワード付きリンクのほうもポイントした場合、 色が変わるようになりました（但し、赤ではありません）。 必要最小限のものだけを残して「赤くなる」「赤くならない」の比較ができるように してみました。初心者のため、非常に時間がかかってしまい、補足が遅くなってしまいました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <TITLE></TITLE> <LINK rel="stylesheet" href="hpb9tm06_3.css" type="text/css" id="hpb9tm06_3"> <STYLE type="text/css"> <!-- A:HOVER{ color : red; /*カーソルオン時*/ } --> </STYLE> <SCRIPT language="JavaScript" charset="Shift_JIS" src="CheckPassword80.js"></SCRIPT></HEAD> <BODY>　<A href="index.html" class="hpb-hmenu1-link1"><FONT size="3">赤くなる</FONT></A> <TABLE> <TR> <TD </TD valign="top" rowspan="2"> <A href="#" class="hpb-vmenu1-link1" onclick="return _HpbPwdWnd(パスワードの設定);"> <FONT size="3">赤くならない</FONT></A> </TD> </TR> </TABLE> </BODY> </HTML> これでわかりますでしょうか？ この中の <LINK rel="stylesheet" href="hpb9tm06_3.css" type="text/css" id="hpb9tm06_3"> の部分を削除すると、どちらも赤くなります。 この部分が影響していると考えるべきでしょうか？ ホームページ作成の際、この部分を削除してしまうと何か問題があるような気もしますが・・・

その他の回答 (3)

  • chikotto
  • ベストアンサー率46% (23/50)
回答No.4

>この中の ><LINK rel="stylesheet" href="hpb9tm06_3.css" type="text/css" >id="hpb9tm06_3"> >の部分を削除すると、どちらも赤くなります。 ということは、 明らかにhpb9tm06_3.cssが原因ですね。 ここに、今までの設定より優勢な設定がされているかと思います。 CSSで指定するのに、同じ設定でもどれを優先させて読み込ませるのか色々とあります （難しい話になるのえ省略します） hpb9tm06_3.cssにa:hover{color:#ff0000;}の一行を追加でもおそらく直らないでしょう。 hpb9tm06_3.cssの中がどうなっているのか不明ですが… ●色が変わるようになりました（但し、赤ではありません）。とありますが、何色になるのですか？ ●hpb9tm06_3.cssの中で、a:hoverがついている部分はありますか？あれば削除してみましょう。 ●hpb9tm06_3.cssの中で、a.hpb-vmenu1-link1:hover…というものがありますか？あれば削除してみましょう。 またはhtmlのほうで、class="hpb-vmenu1-link1"を削除してみましょう。 class="hpb-vmenu1-link1"がなんとなく原因のような気がします。 class="～"とは、どこを指定するのかの目印の旗のようなものです。 hpb-vmenu1-link1というところを●●する、という設定があるなら、そちらが優先されています。

mapooo
質問者

お礼

＞　色が変わるようになりました（但し、赤ではありません）。とありますが、何色になるのですか？ ページ全体が薄茶色系統、リンクテキストの平常時文字色（指定なし）は紫と灰色の中間ぐらい、リンクテキストのポイント時文字色はオレンジ色、といった感じです。 ＞　class="hpb-vmenu1-link1"を削除してみましょう。 ポイントした際に赤くなるようにはなりましたが、平常時の文字の色が変わってしまい、フォントサイズも大きくなってしまいました・・・ いろいろ試してみて、だんだんとわかってきました。 ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。 但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。 「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。 後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。 ご回答ありがとうございました。

mapooo
質問者

補足

親身のご回答、何度もありがとうございました！

noname#100277
noname#100277
回答No.3

hpb9tm06_3.css の中身は？ 削除しても不都合が無いのなら削除ですね。 削除したら駄目な場合はhpb9tm06_3.cssにa:hover{color:#ff0000;}の一行を追加ではどうですか？

mapooo
質問者

お礼

ご回答ありがとうございました。

  • chikotto
  • ベストアンサー率46% (23/50)
回答No.1

A:HOVER{ color : red; } これを約すると、「リンク部分にマウスカーソルをのせると、文字を赤くします」となります。 >ポイントしても文字が赤くならず、 他の部分がどう影響しているのか不明なのでなんともいえません。 これだけをみると赤くなるはずです。 >クリックするとパスワードを要求する画面が出ます。 これは状況が分からなさすぎなのでなんともいえません。 ちなみに、「パスワード付きリンク」はまったく関係ありません。 <a href="リンク先アドレス等">テキストリンク</a> のように、aタグでくくられていればすべて対象となります。 単純に考えると a{ color:blue;←リンク部分は文字を青にします } a:hover{ color:red;←リンク部分にカーソルをのせると文字を赤にします } となります。 ●aタグでリンクはくくられていますか？ ●そのリンクテキストのソースはどうなっていますか？ ●そのほかリンクの色を設定していませんか？

mapooo
質問者

お礼

ご回答ありがとうございます。 ＞クリックするとパスワードを要求する画面が出ます。 の部分は、「最初からそのように設定しているので、この部分だけは設定した 通りに動きます」ということを言いたかったために、念のため書いただけです。 まぎらわしくて申し訳ありません。

mapooo
質問者

補足

ご回答ありがとうございます。 <BR> <FONT color="#7d5802" size="3"> <A class="hpb-vmenu1-link1" onclick="return _HpbPwdWnd(パスワードの設定);"> <U>表示させる文字列</U></A></FONT><BR> という感じですが、これでわかっていただけますか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • ホームページのリンクの色の設定について

    HTMLの記述においてリンクの色の設定は（link vlink alink）の３種類があると思いますが、 マウスを置いた時の色の指定はHTMLでは出来ないのでしょうか？ マウスを置いた時の色はいつも「赤」になるようですが、これを変えるにはスタイルシートを 使わなければならないことになるのでしょうか？

  • マウスをリンクの上に置くと色が変わる部分と変わらない部分がある

    みなさん、はじめまして 質問させてください<(_ _)> いまホームページビルダーを用いてＨＰを作成しているのですが、マウスをリンク部分の上に置くと文字の色を変えたくていろいろ試しました。 行った方法はheadの間を <STYLE type="text/css"> <!-- A:hover{color : red;} --> </STYLE> という文字を入力しました。 その結果、画面の一部分は色がかわるのですが、他の部分は変わらないのです。 この場合どのようにしたらよろしいでしょうか？

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

    以前に同じ質問内容が掲載されておりましたので（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> その結果、【ページ編集】タグのリンク文字は黒だったのですが、肝心の【プレビュ】タグを見ると、リンク文字は「紫」ポイントすると「赤」です。 他の色で試してみたのですが【プレビュ】タグを見ると、リンク文字は「紫」を表示します。 長々な質問内で申し訳ございませんが、この原因をどなたか教えてください。 よろしくお願いします。

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

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

  • ホームページビルダー１０　スタイルシート

    ホームページビルダー１０　スタイルシートで、 リンクの入った文字を、カーソルを上にすると、色が変わる（ＨＯＶＥＲ）非表示のリンク（LINK)表示のリンク（VISITED)があり、リンクの文字の色を変えることができますが、設定すると、そのページのリンクの文字がすべて同じ設定になってしまいます。 例えば、ある文字は　HOVERは赤　LINKは白　VISITEDは緑　同ページのほかの文字はHOVERは黒　LINKは黄　VISITEDは青　のように個別に設定したいのですが、 よくわかりません。classを使って、できるというようなことが書いてありますが、よく設定の仕方がわかりません。ご教授お願いいたします。

  • ホームページビルダーでリンク文字の色を変えるには？

    次のような場合，どのように設定すればよいのでしょうか？テーブルの中に文字(画像ではなく）を入れ，テーブル内の色を，例えば緑，そしてスタイルシートで文字を白に設定したとします。この文字をリンクボタンとして設定した後，ここにマウスポインタがきたとき，背景ではなく文字の色だけを別の色に変えたいのです。スタイルシートでA:HOVERの前景色を指定しても 変化しないのですが，どこが間違っているのでしょうか？

  • マウスが上にあるリンク

    HPビルダー7です。 マウスが上にあるリンクで文字の色が変わりません。 表示→スタイルシートマネージャー→追加→スタイルの設定→HTMLタグの候補→マウスが上にあるリンクで 設定しますが変わりません。 カラーと背景では「前景色」と「後景色」だけで、文字のバックの色は変化しますが、文字そのものの変更が出来ません。 文字の色そのものをマウスを置いたら変わる方法をご教授下さい。HPビルダー7のソフト内でお願いします。

  • 触れたときに文字の色を変える方法

    こんばんは。 リンクを貼った文字を最初は赤にし、触れたときに桃色にしようと思っています。 <head></head>の中に <style type="text/css"> <!-- a:hover{color:pink;} --></style> とし、 <A href="アドレス"><font size=2 color=red>文字</font></A> のようにリンクを貼りました。 しかし、赤のままで触れても桃色になりません。 フォントで囲むのをやめると、文字は青で触れたら黄色になりました。 どうすれば私のしたいようにできるでしょうか？ ご指導よろしくお願いいたします。

  • 特定の画像リンクだけhover時の文字色を変更

    特定の画像リンクにだけスタイルを適用したいと思っています。 特定の画像リンクにクラス名“diet”と付けて、そのリンクにだけ hover 時の文字の色を赤色にしようと考えています。 その場合の記述の仕方を教えてください。 次のように記述しているのですが、うまくいきません。 HTMLに直接書き込む方法にしています。 <head> <style type=”text/css”> <!- a.diet :hover {color: red;} -> </style> </head> <body> <a href="アドレス"><img src=画像のアドレス></a> </body> （必要なところだけ抜粋しています） どこが間違っているのでしょうか？ 何度やってもうまくいません。 クラスの書き方がよくないのでしょうか？ できれば、HTMLに直接書き込む場合と、CSSを利用する場合の、２つの書き方を教えてください。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • リンクをポイントしたときのマウスポインタの形

    Word 2003でWebページを作っています．(PCはWinXP home SP2) 普通リンクをポイントしたときに表示されるマウスポインタの形は手の形に変わりますが，「図」にハイパーリンクをつけた場合，ポイントしてもマウスポインタの形状が変化しません（ＩＥ6.02)． クリックすればそのページには飛びますけど，統一感がないので，普通に手の形になるようにしたいです． ただし，「文字列」にリンクをつけた場合はちゃんと手の形になります． ＩＥでは形は変化しませんが，ＯＰＥＲＡ７では普通に変わります． また，ホームページビルダーv.6でＨＴＭＬを読み直してリンクを付け直すと，クリックしてもリンクされなくなってしまいます. 実際にWordで図にハイパーリンクをつけてＨＴＭＬを作成していただければわかると思います．

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する