- ベストアンサー
同一ページ内でリンクテキストの色を2パターン以上設定することはできますか。
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
.menu a {color:#18519E} .menu a:hover {color:red} .contents a {color:#18519E} .contents a:hover {color:orange} <ul class="menu"> <li><a href="**">りんご1</a> <li><a href="**">りんご2</a> <li><a href="**">りんご3</a> </ul> <div class="contents"> <a href="**">みかん1</a> <a href="**">みかん2</a> <a href="**">みかん3</a> </div>
その他の回答 (3)
- partita
- ベストアンサー率29% (125/427)
hoverで赤色にしたい部分が複数個所あるときにはクラス属性を使用します。 スタイルシートで a:hover.color1 {color:red;} a:hover.color2 {color:orange;} と記述し、HTMLでは <a class="color1">りんご</a> <a class="color1">めがね</a> <a class="color2">ねっと</a> <a class="color2">てきすと</a> … のようにするといいです。 (a.color1:hoverだったかな・・・。どっちの記述だったか忘れてしまいました。両方試してください。)
- sr-agent
- ベストアンサー率43% (594/1373)
たとえば、 <div id="ap">りんご</div> <div id="or">みかん</div> とタグを書き、 スタイルシートでは #ap a:hover { color: #ff0000 } #or a:hover { color: #ff9900 } とすれば宜しいのではないでしょうか? 試してみてくださいね。
- chie65536
- ベストアンサー率41% (2512/6032)
<a href="リンク先URL1"><font color=好きな色1>テキスト1</font></a> <a href="リンク先URL2"><font color=好きな色2>テキスト2</font></a> <a href="リンク先URL3"><font color=好きな色3>テキスト3</font></a>
関連するQ&A
- CSSでリンクテキストの背景色を透過させたい
こんにちは。 検索してみたのですが、「背景色をつける」方法は数あれど、「透過させる」 方法は見つかりませんでしたので質問します。 ボックスの背景に青色グラデーションがかかっています。 このボックスの中に書いたテキストの一部に、リンクを貼りました。 ブラウザで確認すると、リンクテキスト部分の背景だけ、白くなっています。 通常のリンクは a{ text-decoration: underline; color: #333399;} a:link{ text-decoration: underline; color: #333399;} a:visited{ text-decoration: underline; color: #333399;} a:active{ text-decoration: underline; color: #333399;} a:hover{ text-decoration: underline; color: #99ccff;} と指定してますので、テキストリンクはオンマウス時だけテキスト色が 変わるようになっています。で、これを強引に透過できないか?と思い a{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:link{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:visited{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:active{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:hover{ text-decoration: underline; color: #99ccff; background-image: url("../img/spacer.gif");} ↑などということをやってみましたが、効果はありませんでした。 できる・できない、どちらでも構いませんので、ご存知の方がいらっしゃいましたらご教授願います。
- ベストアンサー
- その他([技術者向] コンピューター)
- マススポインタがリンクの上に乗ると色が変わる設定方法
ホームページを作成中です。 リンクの上にポインタを置くと、背景色と文字色を変えるようにしたいのですが、 それについてはこちらの以前からの質問で、 テキストエディタの<head>~</head>内に、 <style type="text/css"> a:link { color:blue; text-decoration:none; } a:visited { color:green; text-decoration:none; } a:active { color:pink; text-decoration:none; } a:hover { background-color:yellow; color:red; text-decoration:underline overline; } </style> と入れると色が変わるようになることを知りました。 その場合、そのままの状態では文字は緑色、マススを乗せると背景が黄色で文字色が赤色に、 クリック後はピンク色の文字に変わるようになると思います。 『a:link { color:blue; text-decoration:none; }』の部分はどこに生かされているのかわかりません。 この部分は一体何の意味があるのでしょうか? また、上記をテキストエディタに貼り付けてしまうと、リンク部分が全てそうなってしまいますよね? マウスを乗せた時には同じ背景色・文字色になってもいいのですが、 何もしない状態(見た目、上記で言う何もしない状態の時)にそれぞれに色を変える場合はどのようにすればいいのですか? 例えると、下記3項目にそれぞれリンクテキストが貼り付けてあるとして、 あいうえお → ここは青色に かきくけこ → ここはオレンジ色に さしすせそ → ここは黄色に する場合、 どのような操作(作業)をすればそのとおりの色に変えることができるでしょうか? とても解りづらい質問ですみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- 同ページ内のリンク下線が消えない
スタイルシートにて、ホバーとアクティブ以外はリンク線が出ないようにしています。 通常は問題ないのですが、同ページ内にリンク先があり、 一度クリックすると下線が表示されたままになってしまいます。 同ページ内リンクが複数あり、それらをクリックするとクリックした分のリンク線が表示されたままになってしまい、困っています。 IEですと問題ないようなのですがChromでこうなってしまいます。 下記のように記述してあります。 お知恵を拝借できますでしょうか。 a:link { text-decoration:none; color:#333333; } a:visited { text-decoretion:none; color:#333333; } a:hover { text-decoration:underline; color:#3333FF; } a:active { text-decoration:underline; color:#3333FF; } a{ text-decoration:none; }
- ベストアンサー
- CSS
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- リンクの色を2色で使い分けたい
はじめまして。 良かったらどなたか教えて下さい。 今、一枚のページを作っているのですが、背景色を"#ffffff"(白)とし、そのリンクを以下の様に指定しました。 <style type="text/css"> <!-- A { text-decoration: none} A:link {color:#000000;} A:visited {color:#ffffff;} A:hover {color:#ff6600;} --> </style> 「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。 ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」 でリンクの文字が見えなくなってしまいます。 hoverの効果(オンマウス時はオレンジ)の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか? (クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです)。 お忙しい所申し訳ございませんが、宜しくお願い致します。
- ベストアンサー
- HTML
- fc2ブログでリンクテキストの色が設定できない
テンプレート名 Penetration です。テキストリンクの色を変更するためにcssを編集しましたが、記事内のテキストリンクに反映されません。 変更箇所は↓ /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #8bc9d7; text-decoration: none; } a:visited { color: #8bc9d7; } a:focus, a:hover { text-decoration: none; } a:active { } ↑上記箇所を、 /* ハイパーテキスト ------------------------------------------------- */ a { overflow: hidden; /* for Fx */ } a:link { color: #6699FF; text-decoration: none; } a:visited { color: #6699FF; text-decoration: none; } a:focus, a:hover { color: #FF9900; text-decoration: none; } a:active { } ↑に書き換えました。 記事タイトル・カレンダー・カテゴリ・コメント・トラックバックは希望通り、テキストリンク→水色 カーソルを重ねると→黄色になりましたが、記事内のテキストには反映されません。 ※訪問済みもアクティブも水色のままで良いので記述しなくてもいい気がしますが、原因が分からなくなりそうで、今のところ消していません。 cssを触りだして10日程度の初心者です。ご指導宜しくお願いします。
- ベストアンサー
- ブログ
- はじめて利用します。質問の上で至らぬところがあればご指摘願います。
はじめて利用します。質問の上で至らぬところがあればご指摘願います。 スタイルシートでリンクの色を変更しているのですが、どうしても未訪問のリンクの色が変わりません。 こんな感じの例で設定しています a{ color:0000ff; font-style:normal; text-decoration:underline; } a:link { color:0000ff; font-style:normal; text-decoration:underline; } a:visited { color:#934C7B; text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } a:active { text-decoration:none; } link要素も試してみましたが、どうしても未訪問のリンクの色だけかわりません。 同じような質問がありましたが、実際に解決策、納得がいかなく質問させていただきました。 昨日今日でサイト作りをはじめたばかりで、色々と疎いです。 解決方法を探しています、なにとぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リンクの下線と文字の間隔を開けるには
ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述(ライブドア)になっているんですが、どう書き換えればいいのでしょうか。 a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{background-color:orange;text-decoration:none;} よろしくおねがいします
- ベストアンサー
- HTML
- 個別にリンクの色を変える方法
リンクの色を個別に変える方法はありますか? 私が作成したWebサイトでは。現在、リンクの色は青で統一しておりますが、数か所のリンクだけグレーにしたいと思っております。 現状のスタイルシートは次のようになっております。 a:link { text-decoration: none; color: #2b50bc; } a:hover{ text-decoration: none; text-decoration:underline; } a:visited { text-decoration: none; color: #2b50bc; } 上記のように記述し、全てのリンクは青に統一されております。 そこで、HTMLファイルのリンクをグレーにしたい単語にアンカーとクラスまたはIDを付けて、スタイルシートでそのクラスまたはIDのcolorをグレーにしてみましたが、リンクの色は青のままでした。 どのようにすれば、個別にリンクの色を変えることができるのでしょうか?
- ベストアンサー
- CSS
- スタイルシートでリンク色を
現在、以下のようなスタイルシートを外部スタイル シートにして使っています。 H1 {COLOR: SILVER;} TD {COLOR: INDIGO;} TBODY {FONT-SIZE: 12px; LINE-HEIGHT: 18px;} A {COLOR: #INDIGO; TEXT-DECORATION: none;} A:hover {COLOR: DEEPPINK; TEXT-DECORATION: underline;} A:active {COLOR: DEEPPINK; TEXT-DECORATION: underline;} この場合で、H1タグを使用したテキストにリンクを 貼ると4行目のスタイルが優先されてしまい、テキス ト色がINDIGOに変更されてしまいます。H1タグのテ キストは、リンクの有無にかかわらず、SILVERにし たいのですがスタイルシートを書き換えることで対応 できますでしょうか。 このスタイルシートを使用したHTMLファイルが既に かなりのページ数になっていますので個別にHTMLファ イルをいじるのは避けたいのです。どなたか解決法を ご教示くださいませ。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト