ホームページ作成初心者です。
ちなみに「ホームページビルダー」を使用しています。
リンクテキストにマウスをポイントすると、ポイントしている間だけ赤く表示され、
さらにクリック後は紫色に表示されるホームページがよくあります。
パスワード付きリンクについて、それと同じ設定になるようにしたいのですが、
どうしてもうまくいきません。
調べてみたところ「ホーバーをかける」ということのようで、
「表示」 → 「スタイルシートマネージャー」 → 「追加」
→ 「HTMLタグの候補」 → 「マウスが上にあるリンク」 → 「色と背景」
→ 「前景色」 → 「赤」 → OK
のように操作しました。
HTMLソースの<HEAD>と</HEAD>の間には
<STYLE type="text/css">
<!--
A:HOVER{
color : red;
}
-->
</STYLE>
と表示されています。
ところが、実際のホームページを開くと、ポイントしても文字が赤くならず、
クリックするとパスワードを要求する画面が出ます。
さらに、パスワード付きリンクでなければポイントの際に赤く表示されるのかと思い、
パスワードなしのリンクに変更した後、実際のホームページを開くと、ポイント
しても文字の色は多少変わるものの、赤ではありません。
対策をご教示いただければ幸いです。
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; /*リンクをクリックしている状態*/
}
で設定できます。
>ポイントしても文字の色は多少変わるものの、赤ではありません。
※色の指定はいろいろと優先順位があるので、これより優先させてしまっている設定がある場合は色は変わりません。
(もしかしたらそっちが原因かもしれません)
この回答への補足
わかりやすいご回答、何度もありがとうございます。
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">
の部分を削除すると、どちらも赤くなります。
この部分が影響していると考えるべきでしょうか?
ホームページ作成の際、この部分を削除してしまうと何か問題があるような気もしますが・・・
いろいろ試してみて、だんだんとわかってきました。
ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。
但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。
「href="hpb9tm06_3.css"」の部分は上記の設定に関係しているようで、これを削除すると背景の色が全て消え、文字色も変わった状態になりました。
「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。
後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。
親身のご回答ありがとうございました。
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というところを●●する、という設定があるなら、そちらが優先されています。
> 色が変わるようになりました(但し、赤ではありません)。とありますが、何色になるのですか?
ページ全体が薄茶色系統、リンクテキストの平常時文字色(指定なし)は紫と灰色の中間ぐらい、リンクテキストのポイント時文字色はオレンジ色、といった感じです。
> class="hpb-vmenu1-link1"を削除してみましょう。
ポイントした際に赤くなるようにはなりましたが、平常時の文字の色が変わってしまい、フォントサイズも大きくなってしまいました・・・
いろいろ試してみて、だんだんとわかってきました。
ホームページビルダーの中に「デザインテンプレート」があり、これまで「スタイリッシュ・エフェクトのテーマから選ぶ」を選択していたので、上部や左側などに枠組付きのリンクを置く場所が確保され、ページ全体を薄緑色系統の色で統一、黄色系統の色で統一、等が簡単に自動的に設定できるようになっていました。
但し、これはホームページ作成において細かい部分でいろいろな制約があることがわかりました。
「スタイリッシュ・エフェクトのテーマから選ぶ」ではなく「色や壁紙から選ぶ」を選択すると、上部や左側などに枠組なしのリンクを置く場所が確保され、背景色、その背景色に応じた「未訪問のリンク色」「訪問済みのリンク色」「カーソルオン時」「リンクをクリックしている状態」のおすすめの文字色が表示され、好みに応じて文字色の設定も可能になりました。
後者の方法で背景色と「カーソルオン時」等の文字色を設定し、あとから上部や左側などにあるテキストリンクを枠組付きのものに変更すれば希望通りのホームページを作成できそうです。
ご回答ありがとうございました。
No.1
- 回答日時:
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>
という感じですが、これでわかっていただけますか?
ご回答ありがとうございます。
>クリックするとパスワードを要求する画面が出ます。
の部分は、「最初からそのように設定しているので、この部分だけは設定した
通りに動きます」ということを言いたかったために、念のため書いただけです。
まぎらわしくて申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- Windows 10 Windows10の不具合(Critical Process Died) 9 2022/04/19 21:11
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページビルダー9でロール...
-
Excel セルの幅が合わない
-
<tbody>は何のためにあるんでし...
-
<h1>タグの後の行間を詰めたい。
-
htmlでテーブル内にテキストボ...
-
FireFoxで見るとブラウザの幅に...
-
table内で画像と文字をセンター...
-
エクセルでサイズ指定でPOP...
-
aタグに直接style=""で:hoverを...
-
バーコードのサイズは拡大縮小...
-
CSSのtransform: translate(-50...
-
Excel で等間隔で縦線を引きた...
-
エクセルでサイズに合ったもの...
-
window.close()で閉じられない
-
INPUT TEXT内の文字位置を指定...
-
ホームページビルダーの表にお...
-
インラインフレームの表示位置...
-
ワードで、横書きの数字を縦書...
-
テキストボックスの文字を右揃...
-
macとwindowsのレイアウト崩れ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HPビルダー 画像挿入の隙間につて
-
テキストのロールバー
-
ホームページビルダーで文字列...
-
DreamWeaverでスクロールバーの...
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
CSSのtransform: translate(-50...
-
Excel で等間隔で縦線を引きた...
-
エクセルでサイズ指定でPOP...
-
Excel セルの幅が合わない
-
PDFへてのテキストボックスにて...
-
table内で画像と文字をセンター...
-
<tbody>は何のためにあるんでし...
-
Excelの列や行の幅を表示...
-
バーコードのサイズは拡大縮小...
-
ホームページビルダー7で、表...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
指定時間になったら、WEBサイト...
-
HTMLフォームのSELECTの幅を一...
おすすめ情報