- ベストアンサー
ホームページ作成でリンクテキストの色変更方法
- ホームページ作成初心者がリンクテキストの色を変える方法について教えてください。
- 「ホバーをかける」操作を試したがうまくいかず、実際のホームページでは文字の色が変わらないか、パスワードを要求する画面が表示される。
- パスワード付きリンクでなければ文字の色が多少変わるが、赤く表示されない。対策を教えてください。
- mapooo
- お礼率81% (54/66)
- その他([技術者向] コンピューター)
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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; /*リンクをクリックしている状態*/ } で設定できます。 >ポイントしても文字の色は多少変わるものの、赤ではありません。 ※色の指定はいろいろと優先順位があるので、これより優先させてしまっている設定がある場合は色は変わりません。 （もしかしたらそっちが原因かもしれません）
その他の回答 (3)
- chikotto
- ベストアンサー率46% (23/50)
>この中の ><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というところを●●する、という設定があるなら、そちらが優先されています。
お礼
＞ 色が変わるようになりました（但し、赤ではありません）。とありますが、何色になるのですか？ ページ全体が薄茶色系統、リンクテキストの平常時文字色（指定なし）は紫と灰色の中間ぐらい、リンクテキストのポイント時文字色はオレンジ色、といった感じです。 ＞ class="hpb-vmenu1-link1"を削除してみましょう。 ポイントした際に赤くなるようにはなりましたが、平常時の文字の色が変わってしまい、フォントサイズも大きくなってしまいました・・・ いろいろ試してみて、だんだんとわかってきました。 ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。 但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。 「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。 後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。 ご回答ありがとうございました。
補足
親身のご回答、何度もありがとうございました！
hpb9tm06_3.css の中身は？ 削除しても不都合が無いのなら削除ですね。 削除したら駄目な場合はhpb9tm06_3.cssにa:hover{color:#ff0000;}の一行を追加ではどうですか？
お礼
ご回答ありがとうございました。
- chikotto
- ベストアンサー率46% (23/50)
A:HOVER{ color : red; } これを約すると、「リンク部分にマウスカーソルをのせると、文字を赤くします」となります。 >ポイントしても文字が赤くならず、 他の部分がどう影響しているのか不明なのでなんともいえません。 これだけをみると赤くなるはずです。 >クリックするとパスワードを要求する画面が出ます。 これは状況が分からなさすぎなのでなんともいえません。 ちなみに、「パスワード付きリンク」はまったく関係ありません。 <a href="リンク先アドレス等">テキストリンク</a> のように、aタグでくくられていればすべて対象となります。 単純に考えると a{ color:blue;←リンク部分は文字を青にします } a:hover{ color:red;←リンク部分にカーソルをのせると文字を赤にします } となります。 ●aタグでリンクはくくられていますか？ ●そのリンクテキストのソースはどうなっていますか？ ●そのほかリンクの色を設定していませんか？
お礼
ご回答ありがとうございます。 ＞クリックするとパスワードを要求する画面が出ます。 の部分は、「最初からそのように設定しているので、この部分だけは設定した 通りに動きます」ということを言いたかったために、念のため書いただけです。 まぎらわしくて申し訳ありません。
補足
ご回答ありがとうございます。 <BR> <FONT color="#7d5802" size="3"> <A class="hpb-vmenu1-link1" onclick="return _HpbPwdWnd(パスワードの設定);"> <U>表示させる文字列</U></A></FONT><BR> という感じですが、これでわかっていただけますか？
お礼
いろいろ試してみて、だんだんとわかってきました。 ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。 但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。 「href="hpb9tm06_3.css"」の部分は上記の設定に関係しているようで、これを削除すると背景の色が全て消え、文字色も変わった状態になりました。 「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。 後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。 親身のご回答ありがとうございました。
補足
わかりやすいご回答、何度もありがとうございます。 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"> の部分を削除すると、どちらも赤くなります。 この部分が影響していると考えるべきでしょうか？ ホームページ作成の際、この部分を削除してしまうと何か問題があるような気もしますが・・・