- ベストアンサー
カーソルが乗ったときリンクの背景色が変わるようにしたい
こんばんは、いまホームページを作っているのですがメニュー項目でカーソルが乗ったときに項目の背景色が変わるようにしたいです。下のサイトのようにです。 http://www.oxfordcity.co.uk/ リンク全部の色を一括で変えるのではなくて、上のサイトのように個別に変わる色を設定したいです。 ソフトはホームページ・ビルダー10を持っています。そして表を使ってメニュー項目を作成しました。そして表の枠を消して、見た感じは上のリンク先のサイトと同じようになっています。この表は使えますか？ あっ、あとリンクにアンダーラインが付いているのですがそれもも消したいです。 よろしくお願いいたしますm(_ _)m
- みんなの回答 （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も保存できるんですね、知りませんでした。ありがとうございます。
お礼
回答どうもありがとうございます！遅くなってすみません。 今回はリンク先を参考にしてうまく設定することが出来ました。ビルダーで簡単に設定することが出来るのですね。ただ一つ不満があるとすれば、左右のパディングは設定できるのですが、どうしても上下のパディングを伸ばすことが出来ません。手書きでタグも編集してみましたが出来なかったので、出来ない仕様なのかも知れませんが・・