ブログタイトルにロールオーバーを使ってみよう

：「Q太郎さん、ブログのタイトルにマウスが重なると
下に線が出るんですけど、あれって何ですか？」

：「それは、ロールオーバーってやつだ」

：「ロールオーバー？ロールケーキではなくて？くだらねー」

：「はなし・・もどしていいか？」

:「ああ、ごめんなさい」

：「ロールオーバー、つまりマウスがその場所と重なると その場所に変化が生じることだな」

：「たまに、画像にマウスを乗せた時も違う画像が
出たりすることもあるけど、それもそうなの？」

：「ああ、だがそれはまだ先の話だ。
今はとりあえずブログタイトルのロールオーバーを
出来るようにしろ」

：「はい。でもどうやって？」

：「/*----Common----*/の中に#banner h1 a{ }という
のがあるだろう。」

：「はい、確かにありました」

：「それがブログタイトルのリンクの設定だな。
だが、このままではロールオーバーは出来ないんだ」

：「ええええええ!!そんな～。
あっ、ちょっと待って。そう言えばどこかでa{ }って見たことあるよ。
もしかしてこれがそうなのかな」

：「Ｅｘａｃｔｌｙ（そのとおり）
テンプレートの一番最初に出てくる
a:link（未訪問リンクの状態）
a:visited（訪問済みリンクの状態）
a:active（気にしなくていい）
a:hover（マウスが乗った時の状態）
これでブログ内のリンクにロールオーバがかかっている。


ブログタイトルだけに特別なロールオーバーをしたいなら
#banner h1 a:link{例text-decoration:none;color:blue;}
未訪問リンク時下線なし、ブログタイトル青
#banner h1 a：visited{例text-decortation:none;color:green;}
訪問済みリンク時下線なし、ブログタイトル緑
#banner h1 a:active{例text-decoration:none;color:green;}
#banner h1 a:hover{例text-dicoration:none;color:red;font-size:15pt}
ロールオーバー時下線なし、ブログタイトル赤、字の大きさ15pt
と記述するんだ。
これも優先順位の法則だな。
忠告するが#banner h1 a{ }の外にだぞ。
{ }内の例は消すんだ。

実際の様子は百聞は一見に如かず。
下のブログタイトルにマウスを置いて自分の目で確かめろ」

なじむ　実に！　なじむぞ

：「このように、#banner h1 a:hover{ }内に
変えたい要素を記述する。分かったかべいすた」

：「分かりましたQ太郎さん、ありがとうございます」

タグ：CSS ブログ カスタマイズ ロールオーバー so-net