CSS（フォント編）第３回リンクの付いているフォント♪【再編集】きまぐれAWA's Life/ウェブリブログ

CSS（フォント編）第３回リンクの付いているフォント♪【再編集】

<< 作成日時： 2008/02/28 16:11 >>

トラックバック 0 / コメント 0

前回の設定では『新着記事一覧』のリンク文字の部分だけ変更しました。
ブログを見ると全体にリンクのついている文字がたくさんあります。
中には一箇所ずつではなく、まとめてデザインの指定が出来きる場所があります。

　メイン部分のリンク文字をまとめて変更♪　

　A 『共通スタイル』 CSS 全体Map

/* アンカー */
a,
a:link,
a:active,
a:visited,
a:hover{
}

この設定でメイン部分のリンク文字はだいたい変えることができます。
デザイン指定をする場所は『/* 共通スタイル */』の『/* アンカー */』の所です。
前回のように『未訪問』『訪問済』『ポインタを置いた時』と個々に色分けをしてみます。
それぞれの変更ポイントは以下の通りです。

未訪問： a:link{color:●;}
訪問済：a:visited{color:●;}
ポインタを置いた時：a:hover{color:●;}

変更ポイントを押さえた上でデフォルトから下の文字列に全文置き換えます。

/* アンカー */
a,
a:link{color:●;}
a:active{
}
a:visited{color:●;}
a:hover{color:●;}

※ W3C CSS Validator（CSS検証サービス）でCSSのチェックのチェックをしたところ、
前回の記述の仕方ではエラーが出たのでデフォルトから上の文字列に置き換えました。
うちの環境では特に問題なく表示されていましたが、以後こちらでCSS編集を続けていきます。

デザインの優先順位はCSS編集画面の『上』より『下』が優先されて適用されます。
『ここ（上）』で指定したデザインより、前回行った『一覧ヘッダセルのリンク文字（下）』の
デザインが優先されます。

ブログのおおまかな部分を変えておいてから変えたい部分をポイント的に
デザインを指定していくという事になります。

次回はコンポーネント領域のデザイン指定をしてみます。（にこ）

それでは、今回はこのくらいで（わら）

|ω・)ﾉｼ See you♪

|彡ｻｯ