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

解決済

質問者：mapooo
質問日時：2009/05/22 15:50
回答数：4件

ホームページ作成初心者です。
ちなみに「ホームページビルダー」を使用しています。

リンクテキストにマウスをポイントすると、ポイントしている間だけ赤く表示され、
さらにクリック後は紫色に表示されるホームページがよくあります。
パスワード付きリンクについて、それと同じ設定になるようにしたいのですが、
どうしてもうまくいきません。

調べてみたところ「ホーバーをかける」ということのようで、
「表示」　→　「スタイルシートマネージャー」　→　「追加」
→　「ＨＴＭＬタグの候補」　→　「マウスが上にあるリンク」　→　「色と背景」
→　「前景色」　→　「赤」　→　ＯＫ
のように操作しました。

ＨＴＭＬソースの<HEAD>と</HEAD>の間には
<STYLE type="text/css">

</STYLE>
と表示されています。

ところが、実際のホームページを開くと、ポイントしても文字が赤くならず、
クリックするとパスワードを要求する画面が出ます。

さらに、パスワード付きリンクでなければポイントの際に赤く表示されるのかと思い、
パスワードなしのリンクに変更した後、実際のホームページを開くと、ポイント
しても文字の色は多少変わるものの、赤ではありません。

対策をご教示いただければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： chikotto
回答日時：2009/05/22 17:55

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; /*リンクをクリックしている状態*/
}

で設定できます。

>ポイントしても文字の色は多少変わるものの、赤ではありません。
※色の指定はいろいろと優先順位があるので、これより優先させてしまっている設定がある場合は色は変わりません。
（もしかしたらそっちが原因かもしれません）

この回答への補足

わかりやすいご回答、何度もありがとうございます。

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">

</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">
の部分を削除すると、どちらも赤くなります。

この部分が影響していると考えるべきでしょうか？
ホームページ作成の際、この部分を削除してしまうと何か問題があるような気もしますが・・・

補足日時：2009/05/22 20:32

通報する

- 0
- 件

通報する

この回答へのお礼

いろいろ試してみて、だんだんとわかってきました。

ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。
但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。

「href="hpb9tm06_3.css"」の部分は上記の設定に関係しているようで、これを削除すると背景の色が全て消え、文字色も変わった状態になりました。

「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。

後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。

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

通報する

お礼日時：2009/05/25 11:36

No.4

回答者： chikotto
回答日時：2009/05/25 10:39

>この中の

><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というところを●●する、という設定があるなら、そちらが優先されています。

この回答への補足

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

補足日時：2009/05/25 12:35

通報する

- 0
- 件

通報する

この回答へのお礼

＞　色が変わるようになりました（但し、赤ではありません）。とありますが、何色になるのですか？

ページ全体が薄茶色系統、リンクテキストの平常時文字色（指定なし）は紫と灰色の中間ぐらい、リンクテキストのポイント時文字色はオレンジ色、といった感じです。

＞　class="hpb-vmenu1-link1"を削除してみましょう。

ポイントした際に赤くなるようにはなりましたが、平常時の文字の色が変わってしまい、フォントサイズも大きくなってしまいました・・・

いろいろ試してみて、だんだんとわかってきました。

ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。
但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。

「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。

後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。

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

通報する

お礼日時：2009/05/25 12:30

No.3

回答者： noname#100277
回答日時：2009/05/22 23:24

hpb9tm06_3.css

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2009/05/25 12:30

No.1

回答者： chikotto
回答日時：2009/05/22 16:07

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>

という感じですが、これでわかっていただけますか？

補足日時：2009/05/22 16:17

通報する