サイドバーのリンク色指定

昨日、ここのデザインに関してのCSSをUPした時に、サイドバーの色に関して調査中だと話したら、何とかずや先生からアドバイスコメントを貰いましたヽ(´―`)ノ

Kazuya
リンクの色でわかった事、書いてみるね。
リンクの色とかスタイルの変更は「擬似クラス」ていう「セレクタ」を使うのね。
セレクタは 「body {」とか「.entry-content {」の部分で擬似クラスってのは「要素が特殊な状態の時に選択されるセレクタてな感じ。
んで、リンクは未訪問時とかマウスカーソルが通過した時とか別々に指定できるようになっていて、


a:link 未訪問時
a:visited 訪問済み
a:active リンクがマウスでクリック中
a:hover リンクの上にカーソルが通過中
a:focus リンクをタブキーとかで選択中


と分かれてるのね。
ただ、上の指定方法だとページの全部のリンクが変更されちゃうから
HTML見たところサイドバーのリンク全部変更だと


#box2-inner a:hogehoge {
/* ここにcolorとかを記述 */
}


さらに細かく指定するときはリンクの上のクラス名を #box2-inner と a:hogehoge の間に指定して絞り込むといいかも。
サイドバーの外部リンクだけだとこんな感じ。


#box2-inner .hatena-module.hatena-module-html a:hogehoge {
/* ここにcolorとかを記述 */
}


・・・文章なげぇぇぇ(ノД`)


なるほど、わからん。(ぉぃ)
感覚でやってたから、専門用語は頑張ってもうちょっと勉強します・・・orz
わざわざ説明文まで書いてくれて、ありがとうねヽ(´―`)ノ
さて、試してみました。

/* サイドバーのリンクカラー指定 */
#box2-inner .hatena-module.hatena-module-html a:hogehoge {
  a:link {color:#0f3490;} /*未訪問時*/
  a:visited,a:active {color:#000000;} /*訪問済み&リンクがマウスでクリック中*/
  a:hover,a:focus {color:#0c733d;} /*リンクをカーソルが通過中&タブキーとかで選択中*/
}

結果は、エラーが出て×。
原因は、#box2-inner部分の{ }とリンクの中の{color:#0f3490;}の{ }がダブって、エラーを起こしていました。
二重カッコの指定が分からなかったので、色々検索してみたが分からず。




ヒントっぽいものを見つけたので試してみた。

/* サイドバーのリンクカラー指定 */
#box2-inner .hatena-module.hatena-module-html a:hogehoge
   a:link {color:#0f3490;} /*未訪問時*/
#box2-inner .hatena-module.hatena-module-html a:hogehoge
   a:visited,a:active {color:#000000;} /*訪問済み&リンクがマウスでクリック中*/
#box2-inner .hatena-module.hatena-module-html a:hogehoge
   a:hover,a:focus {color:#0c733d;} /*リンクをカーソルが通過中&タブキーとかで選択中*/

一つ一つ指定するやり方。
結果は、未訪問時のみ反映されず。




#box2-inner内全部でも問題なかったので、再度試した。

/* サイドバーのリンクカラー指定 */
#box2-inner
   a:link {color:#0f3490;} /*未訪問時*/
#box2-inner
  a:visited,a:active {color:#000000;} /*訪問済み&リンクがマウスでクリック中*/
#box2-inner
   a:hover,a:focus {color:#0c733d;} /*リンクをカーソルが通過中&タブキーとかで選択中*/

↑これが完成形です。
ちなみに、#box2-inner a:hogehogeではダメでした。


更にかずや先生からのアドバイスが届きました。

ゴメン!
hogehoge ってのは意味のない意味のある言葉というか、linkやvisitedをかわりに入れてね的なものでした。
(どうやらダミー名だったようです)

最後の2つがちょい修正必要っぽい。
「,」は、まったく別の対象を設定するって意味があるから、いまのままだと active focus が全部のリンクに設定されちゃう。
ってことで、下みたいにしてみたよ~


#box2-inner a:visited, #box2-inner a:active {color:#000000;} /*訪問済み&リンクがマウスでクリック中*/
#box2-inner a:hover, #box2-inner a:focus {color:#0c733d;} /*リンクをカーソルが通過中&タブキーとかで選択中*/

そうなのか・・・(´・ω・`)
結局、全部頭から指定しないといけないのね(´д`)



/* サイドバーのリンクカラー指定 */
#box2-inner a:link {
color:#0f3490; /*未訪問時*/
}
#box2-inner a:visited, #box2-inner a:active {
color:#000000; /*訪問済み&リンクがマウスでクリック中*/
}
#box2-inner a:hover, #box2-inner a:focus {
color:#0c733d; /*リンクをカーソルが通過中&タブキーとかで選択中*/
}

↑これが完成形か!?
かずや、ありがとう~!
マジで助かりました(*´д`*)

最新記事の画像に関してのアドバイスもあったけど、土台設定に関するソースもUPした方がいいので、後日書きますね。

広告を非表示にする

※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana