- ベストアンサー
カーソルが乗ったときリンクの背景色が変わるようにしたい
こんばんは、いまホームページを作っているのですがメニュー項目でカーソルが乗ったときに項目の背景色が変わるようにしたいです。下のサイトのようにです。 http://www.oxfordcity.co.uk/ リンク全部の色を一括で変えるのではなくて、上のサイトのように個別に変わる色を設定したいです。 ソフトはホームページ・ビルダー10を持っています。そして表を使ってメニュー項目を作成しました。そして表の枠を消して、見た感じは上のリンク先のサイトと同じようになっています。この表は使えますか？ あっ、あとリンクにアンダーラインが付いているのですがそれもも消したいです。 よろしくお願いいたしますm(_ _)m
- yohta
- お礼率95% (240/251)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
提示されたサイトさんでは、表を使ってメニュー項目を作成しています。 １つのメニューに対して、それぞれ個別に作成したスタイルシートのクラス指定で設定して、背景色を変えています。 （メニューの数だけ作成・設定が必要。） ビルダーのスタイルシートマネージャで設定するのでしたら、 こちらが参考になるかと思います。 リンクの下線を消す http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0450 クラス別に設定する http://hpb.web-creation.info/y1_class_b.html メニュー分だけ「クラスのスタイルの設定」でクラス名を変えて複数作成し、 リンク文字に対してそれぞれクラス設定すればよいと思います。 オンマウス時での背景色を変えるには、 A：hover（クラス別の場合A.class名：HOVER）で 「スタイルの設定」→「カラーと背景」タブ→背景色の所を変えます。 （前景色の項目は”文字色”となります。） なお、ビルダー10以前のスタイルシートマネージャ機能では、 display:block;やoutset、insetの設定ができません。（対応しているのはビルダー11以上から） スタイルシートについての基礎的な知識があるなら、 ビルダーのHTMLソース画面（または「メモ帳」などのテキストエディタ）で入力して設定したほうが手っ取り早いかもしれません。 （スタイルシートマネージャで、ある程度設定しておき、ソース画面で不足している部分を追加入力することでも、設定できます。）
その他の回答 (4)
- panto-maim
- ベストアンサー率89% (476/533)
>ただホームページビルダーにコピペすると、 >編集を加えるためには変換が必要だと求められ、 >大幅にタグを書き換えられてしまい、その後はhoverの機能を失ってしまいました。 かんたん配置モードで作成したページでしたら、 「どこでも配置モードで編集するためにページを変換します」というようなメッセージがどうしても出てしまい、 （ビルダーの仕様と思われます。） 上手くいきませんので注意してください。 （「変換します」に対してOKじゃなくキャンセルで返すと、タグを書き換えられることはないですが、 後々面倒なことになるやもしれません。） 標準モードで作成することができません（かんたん配置モードでしか作成・編集することができません）、 ということでしたらお役に立てないかも・・・。 個人的には、標準モードで作成するのがおすすめです。 ちなみに私の作成環境では、そのタグで何の問題もなく上手くいきました。 （編集スタイルはスタンダードまたはエディターズ、 標準モードです。）
お礼
再度回答どうもありがとうございます！お礼が遅くなってすみません なるほど、どこでも配置モードで編集していたからうまくいかなかったのですね！ どこでも配置モードが一番いいと決め付けて、今まで他のモードを試したことがなかったのですが、標準モードも使ってみようと思います。
- akios0823
- ベストアンサー率36% (4/11)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>カーソルを重ねると背景色が変わります。</title> <style type="text/css"> <!-- a:link { color: #ffffff; text-decoration: none; } a:visited { color: #ffff00; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; } a:active { color: #ff00ff; text-decoration: none; } --> </style> </head> <body bgcolor="#ffffff" text="#000000"> <table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td height="20" bgcolor="#67ADD0" onmouseover="this.style.backgroundColor='#A3C1E0'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#007E86" onmouseover="this.style.backgroundColor='#25BEC7'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#317B54" onmouseover="this.style.backgroundColor='#9ACAB1'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#336633" onmouseover="this.style.backgroundColor='#99CC99'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#736530" onmouseover="this.style.backgroundColor='#C0AA51'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#996633" onmouseover="this.style.backgroundColor='#CC9F6A'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#CC6633" onmouseover="this.style.backgroundColor='#DFA082'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#990000" onmouseover="this.style.backgroundColor='#E63D3D'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#A02075" onmouseover="this.style.backgroundColor='#C796B7'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#663366" onmouseover="this.style.backgroundColor='#CC99CC'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#424284" onmouseover="this.style.backgroundColor='#7CA8D3'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td height="20" bgcolor="#3681CB" onmouseover="this.style.backgroundColor='#81C1FF'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;"> <a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td> </tr><tr> <td style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;" height="20" bgcolor="#ffffff"> オンマウスで背景色が変わります。<br>さらにテキスト文字にオンマウスで<br>文字色が変わり、クリックすると<br>リンク先にジャンプします。 </td></tr></table> </body></html>
お礼
回答どうもありがとうございます！遅くなってすみません。 こんなに長いタグを書いてくださってありがとうございます。そしてリンク先はまさに僕が求めていた感じです。ただホームページビルダーにコピペすると、編集を加えるためには変換が必要だと求められ、大幅にタグを書き換えられてしまい、その後はhoverの機能を失ってしまいました。
- yambejp
- ベストアンサー率51% (3827/7415)
hoverをつかうのが一般的ですね アンダーラインはtext-decorationです こんな感じで・・・ <style> #menu{ margin:0px; padding:0px; list-style:none; } #menu li{ display:inline; } #menu li a{ display:block; width:200px; font-weight:bold; color:white; text-decoration:none; } #menu1{background-Color:#ff0000;} #menu2{background-Color:#00ff00;} #menu3{background-Color:#0000ff;} #menu1:hover{background-Color:#ffc0c0;} #menu2:hover{background-Color:#c0ffc0;} #menu3:hover{background-Color:#c0c0ff;} </style> <ul id="menu"> <li><a href="#" id="menu1">menu1</a></li> <li><a href="#" id="menu2">menu2</a></li> <li><a href="#" id="menu3">menu3</a></li> </ul>
お礼
回答どうもありがとうございます！遅くなってすみません。 hoverというのは今回始めて知りました。yambejpさんのタグをコピーしてビルダーに貼り付けたらうまく変換できて、文字を入れ替えたらそのままでも使えそうです。ありがとうございます。
- suzuko
- ベストアンサー率38% (1112/2922)
同じことをしたいのならば、そのページのソースを参考にしてはいかがです？ HTMLはIEならば「表示」から「ソース」で見れますし、CSSもHEADにあり場所が書いてありますよ。 http://www.oxfordcity.co.uk/sys/styles/advanced_main.css
お礼
回答どうもありがとうございます！遅くなってすみません。 最初にソースを保存して拡張子をHTMLに直して、ブラウザで開いてみたんですよ。そうしたら全然違う感じになってしまって(カーソルを乗せても変わらない、文字飾りが消えている等) cssも保存できるんですね、知りませんでした。ありがとうございます。
関連するQ&A
- マウスカーソルを置くとリンク文字の背景の色が変わるようにしたい
http://www.ecmanderson.net/ 上のサイトの左のメニューのようにカーソルを置くと文字の背景の色が変わるのはどうすれば良いのでしょうか？ （上のサイトと同じでも構わないです） 画像を変えるロールオーバーとは違うのでわかりません、どなたか教えてくださいませんか？
- ベストアンサー
- Mac
- ホームページビルダー13を使用している初心者です。リンクテキストが
ホームページビルダー13を使用している初心者です。リンクテキストがいつも淡い青色でアンダーラインのない状態なのですが、鮮やかな青色でアンダーラインのついたテキストリンクを生成するにはどのようにしたらよいのでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー９で文字にリンクを
ホームページビルダー９で文字にリンクを貼り付けると、どうしても文字の下にアンダーラインが入ります。先日、あるホームページでは、文字にリンクを貼り付けているのに、アンダーラインがありませんでした。これはホームページビルダー９でも可能ですか？それとも別ソフトだからできることなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- リンクを張った文字の色を変えない方法
ホームページ・ビルダー８でのホームページをを作成しようと取り組んでいます。 メニューのページに項目を書き入れトップページとしています。そのトップページから他のページ（項目）にリンクを張った時、リンク元のメニューページの項目のフォントの色が青色に変わります。 元のフョントの色を変色させない方法が分かりません。もちろんリンク元のフォント色はクリックすれば変色しますが、クリックする前は元のフォント色を持続させたいのですが、教えてください。 表現が適当で無いかもしれませんが、よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- リンクをセル単位にしたい
こんにちは。 メニュー（リンクの集まり）を表にしています。 そして、セルの一つひとつにリンクの文字が入るという構造になっています。 普通にリンクを設定すると、文字の上にだけリンクが張られるという形になっているのですが、これをセル全体に設定したいのです。 つまり、セルのどの部分でもリンクが張られている状態にしたいのです。 ホームページビルダー１３を使っています。 ビルダーでこのようなことはできないのでしょうか。 どなたかわかる方、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リンク部分にカーソルが来たら反転表示したり、色を変えたりしたい。
いつもお世話になっております。 質問は件名のとおりなのですが、 ホームページのリンクが設定してある部分にカーソルが来た時に 反転表示したり、太字にしたり、アンダーラインをしたりするページがありますよね？ それをしたいのですが、どのようにしたら良いのでしょうか？ おそらくスタイルシートかJavaScriptなんだろうな、とは予測しているのですが、 ネットなどで調べても分かりませんでした。 出来ればソースの直接の記述方法と、 ホームページビルダーページデザイン画面で実現する方法と両方を知りたいのですが・・・。 片方だけの回答でも構いません。みなさんよろしくお願い致します。
- ベストアンサー
- HTML
- リンクのリストを作るには
ホームページビルダーver.6使用中ですが、どうしてもわからないので教えてください。 リンク項目のリストの前に ＋ がついていて、これをクリックすると下に関連するリンク項目（サブメニュー）が表示されるようにしたいのですが、さっぱりわかりません。 つまり項目が多いので ＋ をクリックして出したり、消したりしたいわけです。
- ベストアンサー
- その他(ソフトウェア)
- CSS? リンク時の背景色変化
ホームページ作成中です。 幾つかのリンクを表に1つずつ入れています。 リンクをロールオーバーした際、その表のバックの色を変えることは可能でしょうか? Flashならすぐ出来ると思うのですが、項目が変動するのでFlashでは面倒です。 CSS(もしかしてJavaスクリプト?)で出来るようでしたら方法を教えてください。
- ベストアンサー
- HTML
- 無料素材にリンクをつけると枠が・・・
ホームページ作りが初めてなので、どうぞ難しい言葉ではなく分かりやすく教えて下さいませ＾＾；説明が下手なので分からなかったら補足しますのでお願いします＾＾； 無料素材のサイトから、「メニュー」というかわいい素材を借り、（もらい？）今作っている私のホームページに張り付けました。そして、表示もされて順調だったのですが、その「メニュー」ボタンをクリックすると、「メニュー」のページへリンクしたくて、「ハイパーリンク」というボタンをクリックし、リンク出来たのですが、その素材に紫色の枠が出来てしまうんです・・・黄色の丸いボタンの素材なのですが、正方形の枠が必ず出来てしまします。試行錯誤しましたが、必ず出来てしまいます。その枠を取る為にはどうしたら良いのでしょうか？ それとも、その無料素材屋さんが、必ず枠が出来る様に作っていらっしゃるのでしょうか？ どうぞ教えて下さい！！お願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
- リンクが開きません
よろしくお願いします ホームページビルダー７を使っています 今まで正常に表示されていたリンクが開かなくなりました トップページにフレームを使い 左にメニュー、右にメニューで選んだページが出るようにしてます この2・3日ほど前からメニューで選んでも、右に開かなくなってきました 友達に確認してもらうとやはり開かないとのことです 何もしてないのに急に出来なくなったので困ってます とりあえずビルダーを確認しましたが、リンクの設定で ターゲットもcontents（右側が水色）になってます どうしたのでしょうか？ 直す方法はあるでしょうか、よろしくお願いします
- 締切済み
- ホームページ作成ソフト
お礼
回答どうもありがとうございます！遅くなってすみません。 今回はリンク先を参考にしてうまく設定することが出来ました。ビルダーで簡単に設定することが出来るのですね。ただ一つ不満があるとすれば、左右のパディングは設定できるのですが、どうしても上下のパディングを伸ばすことが出来ません。手書きでタグも編集してみましたが出来なかったので、出来ない仕様なのかも知れませんが・・