• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:CSS 記事内link色変更方法)

CSS 記事内link色変更方法

このQ&Aのポイント
  • CSSで記事内だけのリンク、又はタグの色を変更する方法について解説します。
  • インターネット上で書かれている方法を試してもうまくいかない場合、末尾が違う可能性も考えられます。正しい箇所にスタイルシートを追加することで、記事内のリンクやタグの色を変更することができます。
  • ALINKは青、AVISITEDは紫、AHOVERとAACTIVEは灰色に設定します。具体的なコード例とともに、どの箇所に追加するかわかりやすく解説します。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

カスケーディングの最も重要な部分に詳細度の計算があります。言葉は難しいですが、要はより詳細に指定してあると、優先される。詳しさは セレクタに登場する要素数    d クラスと擬似のクラスの数    c IDの数             b 要素自体に書かれているスタイル a(CSS2.1から変更された) です。 たとえば a{}だと[0,0,0,1]・・1と考えてよい a:link{}だと、[0,0,1,1]・・・11 p a:link{}だと、[0,0,1,2]・・・12 div p:link{}だと、[0,0,1,3]・・13 div.body a{}だと、[0,0,0,3]・・3 div.body p a[href="./index.html"]{}だと、[0,0,2,3] この詳細度を集計した後で詳細度が低いものから順に並べてより高いものがあれば上書きします。同じ詳細度なら後から登場したものが優先されます。  それに、重要宣言も加味します。  ご利用のブログですが、便利が良いのはfirefox+DOM Insoector(通常は入っている)で、文書構造を確かめます。先祖のどのような要素がどのようなclass名やidをもつ要素があるかわかりますから、それを使って目的の要素にスタイルが適用されるようセレクタを書きます。もちろん、HTMLソースそのものを見ても良いでしょう。  fireBugというアドオンを使えば、リアルタイムに変更を反映して確認も出来ます。 基本は、全体に適用すべきスタイルを必要最小限の詳細度で記述する。 a:link{} ついで、外側の親要素から色を指定する。 div.entry_body a:link{} さらに、段落中だけなら div.entry_body p a:link{} ・・いったんリンクの色の指定を見つけてすべて消してから、適当な場所に改めて上記のように書き連ねていくとわかりやすいでしょう。どこに書いてあっても関係ありません。  FC2ブログ自身を教えていただいて、ここという教え方も可能でしょうが、それでは身につきません。そんなに難しいものじゃありません。理屈は単純です。

hirothai
質問者

お礼

全くの初心者(基本もわかっていない自分)には↓ 基本は、全体に適用すべきスタイルを必要最小限の詳細度で記述する。 a:link{} ついで、外側の親要素から色を指定する。 div.entry_body a:link{} さらに、段落中だけなら div.entry_body p a:link{} の情報はとてもわかりやすかったです。 また、firefoxとfirebugをインストールして使ってみましたが、これらもとても良いソフトですね! 忙しい時間を割いて、とてもためになる良い情報、参考を教えていただきありがとうございました。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

セレクタ(selector)で、希望の要素(element)に、プロパティ(propertie)と値(value)のセットでスタイルを適用させます。  セレクタ{プロパティ:値;プロパティ:値;プロパティ:値;}           宣言ブロック スタイルシートの説明サイトや書籍では、プロパティや値を説明するために、セレクタをclass名やidでセレクタを記述して、プロパティについては説明がありますが、カスケーディングスタイルシートにとって、本当に重要なことは、セレクタとカスケーディングです。カスケーディングスタイルシートと、わざわざ断るくらい・・・プロパティより重要。 そのため、少し長く詳しい説明になりますが、我慢して読むこと      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  多くの場合、HTMLがきちんと書けてさえいれば、セレクタ(選択肢)は書けるはずです。 たとえば、本文中のリンクのデザインを変えたければ、 HTMLが下記のようにきちんと文書構造を示すように書かれていれば・・ <div class="header">  ヘッダ </div> <div class="section">  本文 </div> <div class="footer">  フッタ </div> div.section p a:link{color:red;} /* <a name="">には適用されない */ div.section p a:visited{color:maroon;}/* 訪問済み */ div.section p a:hover,div.section p a:focus{clor:green;}/* フォーカスとホーバー */ div.section p a:active{color:yellow;background-color:black;}/* クリックされたとき */ と指定できますよ。  これは、順番に関わらず・・たとえばこれより後の記述で a:link{color:blue;text-decoratopn:none;} と記述されていても、色は変更されませんが、text-decoratopnは適用されますね。 あるいは、 <div class="section">  <h2><a href="">見出し</h2>  <p>本文・・<a href="">リンク</a>・・・</p> </div> の見出し<h2>には、それが適用されます。  なぜなら、 div.section p a:linkは、 「div.section(本文)の子孫( )のp(段落)の子孫( )のa要素のうちlinkを持つa要素について」 と言う意味ですから、 単純な a:link よりも詳しい・・詳細度(specificity)が高いからです。 >「スタイルシートの末尾にこれこれを入力してください」 は、カスケーディングの仕組み上、そんなものじゃありません。 出所(著者>読者>フラウザ)、重要度(importany!)、詳細度でソートしなおして、それらがすべて同じなら登場順に適用されます。たとえ最後に登場しても、他のカスケーディングルールで優先度が高いものがあれば、上書きできません。 >CSSで記事内だけのリンク、又はタグの色を変更したいのですが、  本文内のリンクだけに適用されるようセレクタを記述します。  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ・・・HTMLが示されていないので本文であることを示す文書構造がわからないのであなたが調べてください。firefoxのDOM inspectorを使うのが楽です。ツール→Wem開発→DOM inspector、またはCtrl + Shift + I で表示されます。 >いろいろインターネット上で書かれている事にはトライしてみたのですが、  素人が書いたマニュアルをいくら調べても「藁の中の針」を探すようなもので、見つけるのは大変です--不可能です。  まず仕様書を確認しましょう。(きちんとした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 )  スタイルシートで最も重要な部分です。仕様書もプロパティの説明より前に書いてある。 ※書かれているスタイルシートではHTMLがないのでHTMLへの対応の正誤はわかりませんが、明らかな間違いは・・ a:link { color: #0000ff;/* ffが全角になってました */ text-decoration: none;/* tが抜けてた */ } です。  これだと詳細度( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity )が、[11]ですが、すべてに適用させることになります。ついで、 h1 a:link, h1 a:visited, .entry_header a:link,/* entry_headerクラスのa:link ・・詳細度[21] */ .entry_header a:visited { color: #603813; text-decoration: none; } ですから、すくなくとも.entry_header a:linkついては上書きされるはずです。  本文中のみ適用させるなら一般的な部分を a:link{color:green;} 詳細度11 で指定して、本文中のみ div.section a:link{color:blue;} 詳細度[22]などで上書きするほうが良いでしょう。

hirothai
質問者

お礼

ご回答ありがとうございます!! 凄く内容の良い回答だったとは思うのですが、当方、全くの素人なもんで、あまり理解できませんでした。。。少しずつ勉強していきたいと思います。 おっしゃられます通り、entry_header a:linkついてはちゃんと上書きされていました。 HTML上に<div class="header">と<div class="footer">の同じ表記はなく、似たもので </div><!-- /header -->と</div><!-- /footer -->を見つけたのですが、同じ事なのでしょうか?? つぎに下記↓を div.entry_body p a:link{color:blue;} div.entry_body p a:visited{color:maroon;} div.entry_body p a:hover,div.section p a:focus{clor:green;} div.entry_body p a:active{color:yellow;background-color:black;} div.pagetop p a:link{color:blue;} div.pagetop p a:visited{color:maroon;} div.pagetop p a:hover,div.section p a:focus{clor:green;} div.pagetop p a:active{color:yellow;background-color:black;} div.content p a:link{color:blue;} div.content p a:visited{color:maroon;} div.content p a:hover,div.section p a:focus{clor:green;} div.content p a:active{color:yellow;background-color:black;} 質問で書いたスタイルシートの↓ /* Hyper text ------------------------------------------------- */ の直後に貼り付けてみたんですが、記事内の「続きを読む」部分がBlueに変わっただけでした。 次に下記↓を a:link{color:green;} div.entry_body a:link{color:blue;} div.pagetop a:link{color:blue;} div.content a:link{color:blue;} 同じところに貼り付けてみたんですが、記事内は(ブログタイトル・記事タイトル・ホームに戻る・FC2ブログ・のリンクを除く)すべてBlue、それ以外は元のREDでした。 しかし、それを今度は /* Hyper text ------------------------------------------------- */ 欄の一番下に貼り付けてみると、記事内は(ブログタイトル・記事タイトル・ホームに戻る・FC2ブログ・のリンクを除く)すべてBlue、それ以外はGreenに変更できていました。 最後に行ったのが一番良いところまではいきましたが、もぅ一踏ん張りです。 現在FC2の共有テンプレートを使用しています。 左側に記事、右側にリンク集があるパターンです。 とりあえず、あとは記事内の「ホームに戻る」リンク色を記事内のリンク色(Blue)と同色に変更したいです。 あとブログ上の一番下にある「Powered by FC2ブログ [PR] 節電 防寒 スキンケア / FC2ブログ」の「FC2ブログ」のリンク色も記事内と同じ色に変更したいです。 ちなみに「ホーム」と「FC2ブログ」のリンクカラーは現在同じですが、他のリンク色(赤)ではありません。 もぅどこをどういじったら良いのか、頭がこんがらがってわからなくなってきました。 まぁいきなりスタイルシートをいじろうとするのが間違っているのでしょうが、宜しければもぅ少しお助けください。どうかよろしくお願いします。

すると、全ての回答が全文表示されます。

関連するQ&A