リンクの色、表示の変更/無料ブログ作成マニュアル

◆リンクの色、表示の変更

スタイルシートをスクロールしていくと、リンクのところは色々な設定がされている事に気付きます。
ここではリンクの色の変更や表示のさせ方についてを解説します。

◆リンクの色

リンクの色の変更も文字の変更と基本的に同じです。
【Ctrl】＋【F】で　a:link　などと検索していくと見付かります。
ここで色を変えればいいんですが、表示を見てみると

a:link{ color: #0000ff; text-decoration: underline;
}
a:visited{ color: #0000ff;
}
a:hover{ color: #ff2200; text-decoration:none;
}

こんな感じでいくつか色の指定をするところがまとまってありますね。
リンクは最大で４種類色の設定が出来ます。

a:link { color: 色 }	通常のリンク色。通常は青。
a:visited { color: 色 }	リンク先に訪問済の際に表示される色。通常は紫。
a:hover { color: 色 }	マウスカーソルを乗せた時に表示される色。
a:active { color: 色 }	クリックした瞬間に表示される色。通常は赤。

全部が表示されている訳ではありません。
書き加えたい時は、上のものを近くに表記してください。
※他の○○{ ～ } の間には表記しない様に。

◆下線などの変更

リンクは普通、下線が入っていますよね。
でも色々なサイトを見ていると、下線が無かったり、マウスカーソルを乗せると色が変わったりするリンクを見た事はないでしょうか？
これ等の設定もこのリンクの部分で変更できます。

上の例では色の後ろに　text-decoration: underline;　という表記が入っていますね。
これが表示法を変えています。
text-decoration: underline;　の赤の部分を変更します。：と；(半角）を消さない様にしてください。

none	下線を消します
underline	下線を入れます
overline	上に線を入れます
line-through	打ち消し線を入れます

これは組み合わせることも可能。
例えば
text-decoration: underline overline line-through ;
とすると、下線、上の線、打ち消し線が全て入ります。

上で表記した状態ごとに設定できるので、表記がない場合は、color: #0000ff;　の後ろに、text-decoration: 表記法 ;　を挿入してください。

■その他のリンク
カーソルを乗せると背景色が変わるリンク
a:hover { ～ }　の間に
background-color:色;　を挿入

カーソルを乗せると背景に画像が出てくるリンク
a:hover { ～ }　の間に
background-image:url(画像のURL);　を挿入

カーソルを乗せると文字が少し移動するリンク
a:hover { ～ }　の間に
position:relative; top:2;left:2;　を挿入
※赤い部分はleft（左）、right（右）、top（上）、bottom（下）で指定可能。
数字は動く大きさです。

いずれも他の設定である　○○:△△;　の間には入れない様に。
一番後ろに表記すればいいと思います。