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

昨日、ここのデザインに関しての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をかわりに入れてね的なものでした。
（どうやらダミー名だったようです）

最後の２つがちょい修正必要っぽい。
「,」は、まったく別の対象を設定するって意味があるから、いまのままだと 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した方がいいので、後日書きますね。