ブログの本文のみリンク色を変えたい

質問

FC2ブログを使用しています。

ブログの記事タイトルを除いた、ブログ記事のエントリー内のみURLやリンク文字の色を設定したいです。

今まではブログ本文のリンク色を変更する際<a href="～"><font color="～"></font></a>のように、毎回文字色を指定するやり方をしていました。

ですがこれだと酷く手間がかかるので、様々なブログを参考し、htmlやcssを弄ってみたのですがびくともしません。

私が使用しているテンプレートにはリンク色の個別の指定は無く、全体の文字色がそのまま適用される形となっています。

例えば、

.all_entries_main{
color:#f0f0f0;
text-align:left;
font-size:12px;
margin:0 0 0 0;
padding:0 15px 15px 15px;
}

のように、本文のカラーは指定できるものの、リンクの色までは指定できません。

ここにリンク文字を変更する記述をしてみたのですが、全く適応されず、また何が間違っているのかも分かりません。

あるブログではCSS以外に、hrmlにも同様の記述を行なう必要があるとありましたが詳細は載っておらず、適切な方法が知りたいです。

是非ご回答宜しくお願いいたします。

回答No.6

lilillllililili · ベストアンサー

スタイルシート自体の記述は間違っていないようですね。
テンプレートを編集する際、スタイルシートの一番下に追加してみてください。

また、次のようにすれば無理やり適用させることもできます。
.all_entries_main a {
color: green !important;
font-size: 12px !important;
}
.all_entries_main a:hover {
background-color: #dddddd !important;
}

このように、各プロパティの値の後ろに「 !important」を付け加えます。

お礼

回答ありがとうございました。

おかげさまで無事に反映されました。

回答No.5

ORUKA1951

＞しかしこれだと、投稿した本文以外の場所まで色が変わってしまいます。
と言うことは記述するスタイルシートには間違いが無いということです。

　あとは、スタイルを適用したい要素をセレクタを使って特定するだけです。最初にあげた
div.all_entries_main a:link{}
などは、適用したい要素---この場合のセレクタの意味は
classが半角スペースで区切れたひとつ以上のリストの中にall_entries_mainを持つdiv要素の子孫であるa要素を特定しています。
　もし、あなたのページで『エントリー内のみURLやリンク文字の色を設定したい』のでしたら、セレクタをきちんと書いて、特定することになります。
　div.all_entries_main a:link{} における「.all_entries_main」は、あなたが質問文で示されたものをそのまま使っていますので、もし適用されないとしたら、セレクタの書き方が間違っています。再度HTMLのDOMを確認して、ただしくセレクタを記述すれば、適用されることはわかりました。
　セレクタや詳細度・カスケーディングを理解していないと、これより先には進めません。あなたのHTMLのすべてのソースを拝見できれば、ピンポイントの答えは出るでしょうが、それではあなたの進歩には、何の役にも立ちません。それどころか、害になるでしょう。私にもそんな暇ないですし。

★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 )
　を目を通して理解してください。それが最短で最善の方法です。

　なお、DOMの確認にはfirefoxに付属のDOM inspectorが便利です。firebug( https://addons.mozilla.jp/firefox/details/1843 )を使うと、DOMの確認以上に、自在に変更して確認できますけど・・

回答No.4

lilillllililili

.all_entries_main {
......
}
これは本文のスタイルですので、それとは別に「本文中のリンク」のスタイルを以下のように指定する必要があります。つまり、改変ではなく新たに追加して下さい。

.all_entries_main a {
　本文中のリンクのスタイルをここに指定
}
.all_entries_main a:hover {
　触れた時のスタイルをここに指定（オプション）
}

補足

再度回答頂きありがとうございました。

.all_entries_mainではなく、.mainだけの場合は記事のリンクを希望の色に変更することができました。

しかしこれだと、投稿した本文以外の場所まで色が変わってしまいます。

回答No.3

ORUKA1951

＞今試したのはcssの最下部に回答中の記述を追加し、{}の中を、{color:#******;}として設定しました。
　どこに書こうと、詳細度が高いのでより低い詳細度の設定より優先されるはずです。

.all_entries_main{
color:#f0f0f0;
text-align:left;
font-size:12px;
margin:0 0 0 0;
padding:0 15px 15px 15px;
}
の記述は、通常の文字と背景に対する指定です。詳細度は[0,0,1,0]で、かつ、margin、padding以外は継承されるプロパティですね。
　ということはcolor:#f0f0f0;text-align:left;font-size:12px;は、継承されてくるが、より細かい設定である(= 詳細度の高い)div.all_entries_main a:link--詳細度[0,0,2,2]で上書きされますね。

　もし、「本文のカラーは指定できるものの、リンクの色までは指定できません。」と言うことでしたら、divを外して試してください。ひょっとしてall_entries_mainのクラス名は、他のタイプ(要素)に設定してあるのかも。

　いずれにしても、出所・継承・カスケーディング・詳細度・優先順位などの言葉がわからないなら、まずそれを身につけてください。これらは、プロパティよりも先にマスターすべきです。
★6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　適用されるスタイルシート内でしたら、どこに書こうと有効なはずです。詳細度が同じものが後から、またはより優先度が高いスタイル指定で登場するか、それ以上の詳細度のものが後で登場しない限り・・・。これはあなたのスタイルシートをすべて読まないとわかりません。

お礼

再度回答頂きありがとうございました。

早速実行してみましたが駄目でした。

.main a{
text-decoration: underline;
color: #ff0000;
}
.main a:link{
text-decoration: underline;
color: #ff0000;
}
.main a:visited{
text-decoration: underline;
color: #ff0000;
}
.main a:active{
text-decoration: none;
color: #ff0000;
}
.main a:hover{
text-decoration: none;
color: #ff0000;
}

のように、mainだけにすると記事のリンク色のみ希望通りに設定することができましたが、サイドバーを除いて記事意外のリンクも全て変更されてしまいます。

.all_entries_main～は何故か受け付けてもらえません・・・。

回答No.2

ORUKA1951

リンクの指定をしてないからでは?
div.all_entries_main a:link{} リンクの擬似クラス
div.all_entries_main a:visited{}　リンクの擬似クラス

div.all_entries_main a:hover,
div.all_entries_main a:focus{} 動的な擬似クラス

div.all_entries_main a:active{} 動的な擬似クラス

　いずれも擬似クラスですから、詳細度は[0,0,1,0]で同じですから、必ずこの順番(上の説明では、一行開けてある)で記述する必要があります。:linkと:visitedは互いに排他的なので順番は問わない。

　念のため、タイプセレクタにつなげて書くほうが良いです。
.all_entries_main{
　はCSS2では、全称セレクタ(すべてのタイプ(HTMLの要素)に当てはまる*があるとみなされます。詳細度[0,0,0,0]・・・すなわち、*.all_entries_main{
div.all_entries_main{
とすると、詳細度が[0,0,1,1]となりますね。

<font color="～"></font>・・・fontは、非推奨です。

基本的には、HTMLには一切手を加えずスタイルが適用できるはずです。

補足

早速の回答を頂きありがとう御座います。

今試してみたのですが、プレビュー画面では一切変わりませんでした。

回答の記述は『エントリに関する部分』の内部に追加すれば良かったのでしょうか？

今試したのはcssの最下部に回答中の記述を追加し、{}の中を、{color:#******;}として設定しました。

やはりやり方がまずいのでしょうね・・・。

回答No.1

lilillllililili

本文が<div class="all_entries_main">～</div>の中にあり、
その中のリンクのスタイルシートを一括指定する場合、次のようにします。

.all_entries_main a {
color: #0094FF;
font-size: 12px;
........
}

また、リンクに触れた時のスタイルシートも指定可能です。
.all_entries_main a:hover {
background-color: #dddddd;
........
}

補足

早速回答を頂きありがとうございます。

早速試してみたのですが、

回答にある
.all_entries_main a {
color: #0094FF;
font-size: 12px;
........
}

の記述は、

.all_entries_main{
color:#f0f0f0;
text-align:left;
font-size:12px;
margin:0 0 0 0;
padding:0 15px 15px 15px;
}

をそのまま改変すれば良いということでしょうか？

それともこれとは別に回答中の記述を新たに追加する必要がありますか？