2005年04月09日

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

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

ちなみに、このブログの

思いの袖丈: 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デザイン第5回「リンクカラー」》にトラックバックです。

[関連記事]

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

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




現在 ウェブログ Ranking 第37位
Seesaaブロガーさんのスタイルシート関連の記事はどれも参考になります。


posted by ふれふぇに at 15:13| Comment(2) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
TBありがと〜♪
最近更新していなくて久々に来てみたらTBあってすっごく嬉しかったですw

またなんかネタ思いついたら更新でもしますね。
Posted by *マーキュ* at 2005年04月14日 02:24
★*マーキュ* さん

コメントありがとうございます。
最近お疲れのご様子ですね。お体大切に。

スタイルシート関連はとても参考にさせていただいておりますので、また気分が乗った時にでも、CSSネタで勉強させてくださいね。
Posted by ふれふぇに at 2005年04月14日 20:42
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック