【 はじめに 】
このブログは、情報教材を参考に、サイトのSEO対策アクセスアップ
アクセス向上に対し実践した内容について記事にしています。
また、それに伴う用語の解説やツールの紹介、オススメの教材についても触れています。

カテゴリはページ上下のリンクより、最新記事はこの下より参照下さい!
【 最新ニュース 】
熱いキーワードと秀逸サイトURL公開中
あなたのサイトがひとり歩きする、ネット口コミ完全攻略法
まぐまぐの有料メルマガですが登録した月に解除すれば無料です!
ビックキーワードでアクセスを集めましょう!

動的なリンク文字への装飾

先日、リンクへの下線の付け方を記事にしましたが、今回は動的にリンクの装飾を変える方法についてまとめたいと思います。

動的といっても、マウスがリンク文字の上に来たときに限ります。

このブログもそうですが、リンク文字の上にマウスが来ると、文字に下線が付くと思います。

ページの基本的なデザインは維持したいけど、出来ればリンクは目立たせたい、と思ってやっています。

結局マウスを重ねないと分からないという点では、不十分なのですが・・・


さて、その設定方法ですが、スタイルシートに設定します。

スタイルシートに下記記述を追加します。

a:hover {
text-decoration:underline;
}

a:hover が、マウスがリンク文字の上に来たときに有効になる設定で、

text-decoration:underline; が、文字に下線を付ける設定になります。

ですので、{}の中に他の設定を追加すれば、他の装飾も可能です。

例.
背景色を出す:background-color:色のコード;
文字色を変更:color:色のコード;

例えば、このサイトは、

・リンク色が#2E70A4
・背景が#E6EAEE

ですが、リンクにマウスが重なったときに、

・リンク色を#E6EAEE
・文字の背景を#2E70A4
・かつ下線を付ける

にしたい場合(要は反転ですね)

a:hover {
color:#E6EAEE;
background-color:#2E70A4;
text-decoration:underline;
}

この設定を追加すればOKです。

こうなります


関連記事
アンカー
リンクには下線を
リンクへの下線の付け方

おかげさまでもうすぐTOP5!鬼ブログランキングorくつろぐ

実践!SEO対策でアクセス向上 TOPへ
posted by ほふり at 00:20 | Comment(2) | TrackBack(0) | アクセス向上計画
この記事へのコメント
ほふり様、こんにちは!朱花*です。

コメントありがとうございました!
とっても嬉しかったです。
まだ、多くの方と交流していないため、
これから、ドンドン頑張りたいです。
ブログの知識がゼロに近いので、
あんな事に悩むのですが・・・。
これから、宜しくお願い致します。

よろしければ、相互リンクお願いいたします!こちらは、先に貼らせて頂きます♪
Posted by 初心者アフィリエータ成長記★未来に向かって稼げ! at 2006年03月16日 14:48
>朱花*さま

コメントありがとうございます。
私もいろいろな方のブログにお邪魔して、交流し始めているところです。
大変なこともありますが、がんばって行きたいですね!

こちらもリンク設置した。
トップページの右になります。
Posted by 実践!SEO対策でアクセス向上 at 2006年03月17日 00:36
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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