Slow Style Story 3

前々回に、ブログ構造のところで、
リンクアンカーについて書きましたが、
スタイルシートを、エディタやメモ帳などにコピーして・・・
a.acontinues{color:#FD6624;text-decoration:underline;}
a.acontinues:link{color:#FD6624;text-decoration:underline;}
a.acontinues:visited{color:#663366;text-decoration:underline;}
a.acontinues:active{color:#FF3399;text-decoration:none;}
a.acontinues:hover{color:#FF0000;text-decoration:none;}こんなようなところを探してみてください。
大体、同じような文が、最初は何もつけず、
次は、:linkがついて、さらに：visitedがつき、：activeがついて、：hoverが付きます。
それぞれ、標準時
リンク設定時、訪問済み時、クリック時、マウスオーバー時の設定が記載されてます。

ここで、｛｝内のおまじないを見ますと、
＃に続く3から6桁の数字が見えると思います。
これが、色番号です。
すでに紹介しております、ＷＥＢカラーリファレンスで色をみて、
横の数字を入れればその色になります。
また、text-decoration:につづくおまじないによって、
文字装飾が出来ます。
none　何もしない
underline　下線
overline　上線
line-through　取り消し線
blink　点滅
と言う具合で、装飾を二つすることも可能です。
方法は、texｔ-decoration：overline underline
といった具合です。
また、ここには表記されてませんが、
；の後ろに続けて、
font-sizeを指定することも可能ですし、
font-styleやfont-weightも指定可能ですので、
マウスオーバー時にのみ斜体にしたり、太字にしたりも可能です。
太字指定するだけで、マウスオーバー時に一回だけブリンクしたのと同様な効果が出ます。

問題は、どの部分がどこに関係しているかだけですので、
ブログの公式サイトのセレクターリストを見たり、
自分で実験したりしながら、見つけてください。
尚、この指定をすると、こちらが優先されますので、
fontサイズはこちらの方にそろえられます。

これだけで十分遊べるはずです。
また、一括してクラス指定されている文字の指定は、
ＨＴＭＬ上でclass＝の表記を探して、存在すれば、
リンクアンカーの増設によって、違う指定も可能です。

実際、私の場合は、このページの上への項目で、
別のリンクアンカーを新設しています。

このように、多彩な文字変化を一括して表記できるのが・・・
スタイルシートです。

また、極端な話をしますと、気に入らない配色があるとき、
エディタなどで、その色が判れば、一括して色変更も可能です。
但し、背景色ではなく背景ＧＩＦを使っている場合はその部分を書き直さないと不可能です。

画像ソフトなどで、元ＧＩＦを色調変換して、
自分の保存画像として、その部分を入れ替える方法もあります。

かくして、元スタイルの色調とはまるで違う色調のブログが作れます。

シンプルなものでも、丸ごと色を変更可能ですので、
シンプルなものをカスタマイズして、その後、全体色が自分のトップバナーに合わないときも、
この方法が使えます。

いかがでしょうか？ちょっと判りにくかったでしょうか？