So-net無料ブログ作成
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。

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

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

kyara2.png:「それは、ロールオーバーってやつだ」

kyara1.png:「ロールオーバー?ロールケーキではなくて?くだらねー」

kyara2.png:「はなし・・もどしていいか?」

kyara1.png:「ああ、ごめんなさい」

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

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

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

kyara1.png:「はい。でもどうやって?」

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

kyara1.png:「はい、確かにありました」

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

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

kyara2.png:「Exactly(そのとおり)
テンプレートの一番最初に出てくる
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{ }の外にだぞ。
{ }内の例は消すんだ。

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


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

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

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。