-- --

リンクの装飾　[ソネットブログカスタマイズ] [編集]

前回やった枠内色変更で全体的な文字色は変わっていますが、まだリンクの文字に触れると#cc0000←この色になってます。
それを今日は↓な感じや



その他リンク表示の色んな装飾についてやっていきます♪
とりあえずいつものようにcss編集を開きます。前回までのカスタマイズはコチラです。

cssは一番上の箇所↓ここからスタートです。

@charset "UTF-8"; /*-----Common-----*/ a:link { text-decoration:none; color:#6d6a66; } a:visited { text-decoration:none; color:#6d6a66; } a:active { text-decoration:none; color:#6d6a66; } a:hover { text-decoration:underline; color:#cc0000; } 以下省略

まず意味を知っておくと変更しやすいので意味を理解します。

a:link	未訪問リンクに関する指定
a:visited	アクセス（訪問）済みリンクに関する指定
a:active	アクティブ（クリックしている時）のリンクに関する指定
a:hover	マウスを合わせた時のリンクに関する指定

次は中身。text-decoration（テキストの装飾を設定）
text-decoration：ココ；に何を入れるかでどう見せるか決まります。

何も編集していなければ

none	何もなし
underline	下線

の2種類が使用されているのがわかると思います。でその後の指定color:#6d6a66;で色が指定されています。
結局今現在リンクについての指定が「線を出す」か「線を出さないか」の指定になっている。という事

訳すと

a:hover { text-decoration:underline; color:#cc0000; }

リンクの箇所にマウスを合わせると下線が出ますよ！文字色は下線は#cc0000の色で表示されますヨ

って感じです。今「a:hover」を訳しましたが他も同じ事。
で、その表示・装飾例として他にも色々あるわけです(o-ｪ-)ﾌﾑﾌﾑ

マウスが触れると変化する一例です（a:hover）

【触れた時太文字】 a:link { text-decoration:none; color:#ff9a00; } a:visited { text-decoration:none; color:#ff9a00; } a:active { text-decoration:none; color:#ff9a00; } a:hover { font-weight:bolder; color:#ffcccc; }

ここからは a:link {text-decoration:none; color:#ff9a00;} a:visited {text-decoration:none; color:#ff9a00;} a:active {text-decoration:none; color:#ff9a00;} を省略します。

【触れた時凹む】 a:hover{ color :#ffcccc; text-decoration : none; visibility : visible; float : none; clear : none; position : relative; top : 1pt; left : 1pt;}

【触れると下に点線と文字色変化】 a:hover{ border-bottom-width:2px; border-bottom-style:dotted; border-bottom-color:#ffffff; color:#ffcccc; }

【触れると囲む】 a:hover { border-top:1px solid; border-bottom:1px solid; border-left:1px solid; border-right:1px solid;}

【触れると点線で囲む】 a:hover{ text-decoration : none; border-width : 1px 1px 1px 1px; border-style : dotted dotted dotted dotted; border-color :#ffcccc;}

【触れた時に背景色がつく】 a:hover {background-color : #ffcccc;}

【触れた時に背景・文字色変化】 a:hover { background-color:#ffffff; color:#ff6666;}

【触れた時に背景・背景枠・文字色変化】 a:hover{ text-decoration:none; background-color:#ffffff; border-top:1px none; border-left:1px none; border-bottom:1px solid #ff33cc; border-right:1px solid #00ffff; color:#000000; }

【触れた時背景に画像】 a:hover { text-decoration:none; color:#000000; background-image:url("/blog/・・・.gif"); } ※見にくいですが画像→が入ってます

他にも沢山アレンジ出来ます。自分のやりたい装飾を組み合わせてみて下さい＾＾
（※組み合わせによっては対応していないブラウザー、または崩れるブラウザーなどあります。）
見本は、マウスがリンクに触れた時（a:hover）を設定しましたがこれを
a:linkに指定すると、通常表示されている時に適用されます。


ついでにもう1つ。a:hoverにカーソルの指定を入れるとリンクに触れた際カーソルが変化します。
実際に↓にカーソルをあててみてください。（※対応していないブラウザーもあります）

crosshair	ne-resize	se-resize	all-scroll	vertical-text
pointer	nw-resize	sw-resize	col-resize	row-resize
e-resize	n-resize	w-resize	no-drop	url('http://●●')
move	wait	help	progress

例）　【触れると下に点線と文字色変化】にカーソルw-resizeの指定を足しました。
a:hover {
font-weight:bolder
border-bottom-width:2px;
border-bottom-style:dotted;
border-bottom-color:#ffffff;
color:#ffcccc;
cursor : w-resize;
}

表示すると


↑こんな風に見えるようになります。

url('http://●●')
↑この自分のカーソルに触れた時についてはまた後日。やります。たぶんｗ


これで、全体的な文字色とリンク色が終わりました。



私は、触れて変化するのではなく、リンクの表示を変えました。↑にした場合のcssは、

@charset "UTF-8"; /*-----Common-----*/ a{ text-decoration:none; （下線なし） border-bottom-width:2px;（下ボーダーの太さを指定） border-bottom-style:dotted;（点線） border-bottom-color:#ff9999; color:#0099cc; } 　※ポイント　 a:link { } a:visited { } a:active { } がすべて同じ指定であれば、3回同じ事を書かなくても a{　　}でまとめる事が出来ます。 訳）） リンク箇所は訪問済み、未訪問、リンク中全て下線なしのブルーで表示され、ピンクの点線が下に表示されます。 a:hover { cursor:crosshair; color:#9900ｆｆ; } 訳）） リンクの箇所に触れると、#9900ｆｆ色になりカーソルもcrosshairに変化します。 body { background:url(/blog/_images/blog/_d8f/chocolaboo/8886457.gif) } blockquote { margin:10px 0; padding:6px; border:1px solid #cccccc; } #container { width :770px; margin:0 auto; background:#ffffff; border-left:1px solid #ff6666; border-right:1px solid #ff6666; border-bottom:1px solid #ff6666; line-height:1.4; text-align:left; color:#660000; } 全体の文字色を茶色にしました。その他の#containerについてはこちらをご覧下さい。

他にも記述方法はあると思います。参考まで♪