リンクアンカーのいじり方?
ブログを見てられると、よくリンクの文字があると思いますが、
状態によっていろいろと変色させたりできるのが、
スタイルシート中のリンクアンカーに付いての設定です。
すでに一度、スロースタイルの3に書いた項目ですが、
こちらに再度記載して、あちらを削除予定です。
では・・
今回は、メニューのアンカーにて説明。
a.amenu{color:#6633FF;text-decoration:underline;}
a.amenu:link{color:#6633FF;text-decoration:underline;}
a.amenu:visited{color:#CC6633;text-decoration:underline;}
a.amenu:active{color:#CCCCFF;text-decoration:none;}
a.amenu:hover{color:#FF99CC;text-decoration:undderline overline;font-weight:bold;}
上から順に5項目、5行ありますが、
それぞれ、
通常時、
リンク時、
訪問済み時、
クリック時、
マウスオーバー時となります
それぞれの状態においての、font属性を設定できます。
ちなみに、ここで、amenuと書いてある部分が他では違う文字になったり、無かったりしますが、
状態は同じと考えてください。
また、物の本によると、この順序は標準では内容ですが、こちらのブログなどではこの順序なので、そのまま記載してます。
次に、最も簡単ないじり方の話ですが、
color:#に続く、6桁の数字というか・・・記号がありますが、
こちらがカラーコードとなります。
代表的な色コードは、
こちらにありますので、ご参照ください。
で、この色番号を入れ替えると、その状態によって希望の色になるわけですね。
また、text-decoration:に続くおまじないで、下線や上線などを設定できます。
よくリンクの文字には下線が引かれていることが良く在りますが、こちらで設定できますね。
ちなみに、おまじないは・・・
none 何も線を付けない
underline 下線
overline 上線
line-through 打ち消し線
blink 点滅<サポートしているブラウザが限られる
です。スペースをはさんで複数指定も可能です。
更に、font-styleやfont-weightなどの装飾も可能ですね。
前者は、斜体指定、後者はfontの太さの指定ですね。
ちなみに、font-styleのおまじないは・・
normal 標準
italic イタリック体
oblique 斜体
です。
又、font-weightのおまじないは・・
400を標準として数値指定か、
normal 標準
bold 太字
lighter 一段細く
bolder 一段太く
です。
また、この設定中にfont-sizeを指定できますが、
こちらで指定すると、他の指定よりも上書きして優先となりますのでご注意を。
ちなみに、ブログ設定では・・・apostedのリンクアンカーにて
フォントサイズの設定がありますので、悩むところだと思います(笑)
次回のスタイルシートよりリンクアンカーの内容についての説明は省略といたします。
関連記事