☆CSS　リンクカラーについて☆ : ★ 魅力的ブログを目指そっと♪ ★

<< ☆アメーバブログリニューアルのご意見ご要望☆ | TOP | ☆更新記事の内容にメリハリを持たせる☆ >>

2005年04月09日

☆CSS　リンクカラーについて☆

スタイルシートについて、関連記事を探していましたら《思いの袖丈》の＊マーキュ＊さんのエントリー《思いの袖丈: ＣＳＳデザイン第５回「リンクカラー」》
という記事を、見つけました。

ちなみに、このブログの

■思いの袖丈: ＣＳＳデザイン。

シリーズもたいへん参考になります。

そこに、

ブログタイトルだけ変化したい場合。

h1 a:hover{ color:#CC33FF; }
h1 a:link{ color:#CC33FF; }
h1 a:visited{ color:#CC33FF; }
h1 a:active{ color:#CC33FF; }
のように変えたい要素（ここではh1）に　a:link{　}　等を追加します。

とあり、これはとても参考になりました。このブログのリンクカラーはタイトルと背景色を考えて設定していたのですが、タイトルを別のカラーに出来ることを知り、たいへん勉強になりました。ありがとうございます。早速取り入れ先日変更いたしました。

そして、この記事の最後のほうで触れている

-p.s-
カラーの解説しかしていないですが、実際にはマウスが乗ったときだけ背景（画像や色）を表示させる・下線を表示させるということも出来ます。

に付いてですが、以前ご紹介したフリーソフトの

■EasyCSS

でも、感単に設定可能ですが、

【下線】

{　}内に

text-decoration : underline;

を追加して入れるとアンダーライン（下線）に出来ます。

[サンプル]

a:link {
color : #0000FF;
text-decoration : underline;
}
（ #0000FFは好きな色に設定してください。）

【マウスが乗ったときにの背景色】

a:hover{ background-color : #000000;}
（#000000は好きな色に設定してください。）

とすれば、マウスが乗ったときに背景色を入れることが出来ます。

a:hover{ background-image: url(https://blog.seesaa.jp/img/***);}
(画像urlを(　)内に入れてください）

とすれば、マウスが乗ったときに背景画像を入れることがたぶん出来ます（ちょっと自信なし）。

たいへん失礼かと思いましたが、補足させていただきます。
ちなみに、このブログの現在の設定は

☆記事全体

a:link {
color :#33CC66;
}
a:visited {
color :#9966FF;
}
a:active {
color :#FF8040;
}
a:hover {
color :#00FFFF;
}

☆タイトル部

h1 a:hover { color:#00FFFF; }
h1 a:link { color:#BBFFDD; }
h1 a:visited{ color:#BBFFDD; }
h1 a:active { color:#FF8040; }

です。

あなたも、ご参考にされてはいかがですか？

・《思いの袖丈: ＣＳＳデザイン第５回「リンクカラー」》にトラックバックです。

[関連記事]

・スタイルシート　☆このブログのCSSについて☆

・★ 魅力的ブログを目指そっと♪ （Reエントリー館）★: ☆引用文の形をCSSで変更する☆