個別にリンクの色を変える方法

質問

リンクの色を個別に変える方法はありますか？

私が作成した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をグレーにしてみましたが、リンクの色は青のままでした。

どのようにすれば、個別にリンクの色を変えることができるのでしょうか？

回答No.3

metametamu · ベストアンサー

基礎なので検索すれば見つけられると思うのですが。
idやclassの使い方がわからないということですよね。

<a href="http://" id="FOO">リンク</a>

#FOO:hover {
color:#ffffff;
}

<a href="http://" class="foo">リンク</a>

.foo:hover {
color:#ffffff;
}

お礼

ありがとうございます！

できました☆☆

回答No.5

noname#206842

Idまたは、class専用の、a: link;a:hoverを書けばOK
仮に、<ul><li>menu1</li><li>menu2</li></ul>となっていた場合、
htmlファイルは、<ul id="test"><li.menu1</li><li>menu2</li></ul>
ｃｓｓは、ul #test{color:#000080;background-color:#cccccc;}
ul#test li a:hover{text-decretion:underline;}
と記述します。

具体的に知りたいのであれば、そのcssの部分を、アップしてください！

下記参考サイト等で学んでください！

参考URL：

http://dotinstall.com/lessons/basic_css

お礼

ありがとうございます。

参考サイトで勉強してみます！

回答No.4

ORUKA1951

＞スタイルシートでbody aでリンクを付けておりました。
この意味が分かりません。
body a{}と指定したということですか？
　この場合、タイプセレクタ２個で詳細度は 0002 になりますよ。

＞そこで、さっきh1の文章中の単語にクラス名を付けてリンクを付けました。
　　単語でしたら<span></span>で囲むことになります。
＞h1の文章と、その文章中の単語へのリンクは同じ色にしたかっただけなのですが、
　^^^^^^(文?)と^^^h1のこと? 単語へのリンクでしたら<span id="HTML">HTML</span>ですよ。
　　　(注!)--本来は、この場合<abbr title="Hyper Text Markup Language" id="HTML">HTML</span>かな
　　あるいは単にターゲットなら<a name="HTML">HTML</a>でしょう。
　⇒12.2 A要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )

＞改行されてしまいました。
　ひょっとしてブロックの<div></div>で囲んだ???
　⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
　⇒7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )

＞現在、通常の文章の色は黒で、他のページに移動してもらうためのリンクは青になってます。
　通常のブラウザは、設定しない場合そうなるはずです。
　しかし、それは
A要素に関しては
a:link{color:blue;} 詳細度0011
だけのはずです。
a{color:}の指定はなく、body{color;}詳細度(0 0 0 1)を継承しているはずです。
ところが、スタイルシートで
a[color:blue;}詳細度 0 0 0 1
body a{color:blue;}詳細度 0 0 0 2
のように指定するとブラウザのデフォルトのスタイルシートより優先順位が高いため、これが適用されてしまいます。
a:link{color:blue;} 詳細度 0 0 1 1
や
a[href]{color:blue} 詳細度 0 0 1 1
だと、リンクのない、あるいはhref属性を持たないA要素の色は変わりません。

＞私は文章中に黒色でリンクを付ければ、ユーザーを混乱させずに、
　ターゲットになるA要素、hrefを持たないA要素の色を変えたくないのでしたら、
a:link{color:blue;} 詳細度 0 0 1 1
か
a[href]{color:blue} 詳細度 0 0 1 1
ですよ。

＞検索順位に優位になるかと思ってやってみたのですが、
　検索順位には関係ないでしょう。もし、私の想像通りリンクターゲットのA要素--<a name="***"></a>でしたら、a要素の色指定を何れかにすれば良いです。

＞デザインを変更せずに行うことができませんでした。
デザインのためにHTMLを書いてはなりません。デザインのためにHTMLを書くのは検索エンジンには不利でしょう。
あくまで、それぞれのタグの意味を理解して適所に使用しましょう。

　折角、文書構造はHTMLでプレゼンテーションはCSSで行うのでしたら
これはSEOとして極めて重要です。
・HTMLの仕様書を通しで読んでおきましょう。
・CSSの命ともいえるカスケーディングは身につけましょう。CSSはカスケーディングスタイルシートの略です。
　⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　⇒6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

お礼

ありがとうございます。

まだまだ理解しきれていないことがたくさんあって、うまく質問ができておりませんでしたが、詳しく回答をして頂きありがとうございます。

こんど仕様書にも目を通しておきます。

回答No.2

ORUKA1951

スタイルシートは、そのHTML文書の要素に対して、その文書構造で指定するものです。きちんと文書構造が分かれば、それに従います。文書構造が分かりにくいときは
　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
　class名などで、スタイルを指定する要素を特定します。
・タイプセレクタ　擬似要素セレクタ
・属性セレクタ　擬似クラスセレクタ(リンク/動的)
・一意セレクタ
・HTMLのstyle属性
　などです。詳細度(特異性)は上から d=1,c=1,b=1,a=1
　したがって、デザインのためにclass名などをデザインのためにつけなくても良いですし、逆に文書構造が分からないとどうすればよいかがアドバイスできないのです。
[例]
・文書のheader(div.header)内の、href属性をもつA要素の:hover時の色
・本文(section)div.section直下の、<p></p>中のa要素のうち未訪問のA要素の色
・本文中の補足記事内の記事中の(リンクをもつ)A要素の色
・foote中のナビゲーションリストのリンクの２番目以降のAの色
それぞれ、文書構造そのままに
div.header a[href]:hover{}　/* 詳細度0032 */
div.section>p a:link{}
div.section div.aside a{}
div.footer div.nav a{}
となりますね。・・・HTMLみなくても、修正できますし、HTMLもシンプルで分かりやすいし、検索エンジンもこれらのclass名は理解してくれます。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )と同じ名前ですからね。

　もうすこし詳しく、HTMLの前後関係を含めて教えてください。

お礼

ありがとうございます。

スタイルシートでbody aでリンクを付けておりました。

そこで、さっきh1の文章中の単語にクラス名を付けてリンクを付けました。h1の文章と、その文章中の単語へのリンクは同じ色にしたかっただけなのですが、改行されてしまいました。

現在、通常の文章の色は黒で、他のページに移動してもらうためのリンクは青になってます。

私は文章中に黒色でリンクを付ければ、ユーザーを混乱させずに、検索順位に優位になるかと思ってやってみたのですが、デザインを変更せずに行うことができませんでした。

私がやろうとしていることはスパム扱いになる可能性はありますか？
背景と同じ色の文字でリンクを付けるという、隠しリンクではないので、大丈夫だと思っているのですが、どうなのでしょうか？

回答No.1

tracer

スタイルシートの記述には優先順位があります。まずは、その優先順位が守られているかどうか。次に、aタグへのスタイルは少し特殊で、きまった順序で書く必要があります。

優先順位については、いろいろあるので、簡単なところだけ上げますと、

・タグを直接指定　<　クラスで指定　<　IDで指定　の順で優先順位が高くなります。
・要素をネストすればするほど優先順位が高くなります。(少し語弊がありますが aよりもbody aの方が優先順位が高いということです)
・同じ指定方法の場合は、先に書かれたものが、後に書かれたものに上書きされます。

aタグへのスタイル指定は、次の順序です。また、基本的にはすべての指定が必要です。

a{

}
a:link{

}
a:visited{

}
a:hover{

}
a:active{

}

お礼

ありがとうございます。

優先順位があったのですね。参考になりました！