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

無料ブログ作成マニュアル

Google
 

◆スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

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

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

◆リンクの色

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

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

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

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(下)で指定可能。
数字は動く大きさです。

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

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

トラックバック
この記事のトラックバックURL
http://hpmanual.blog81.fc2.com/tb.php/32-c47cbe47
この記事へのトラックバック

Copyright 無料ブログ作成マニュアル 簡単FC2入門 All rights reserved.
Template by 無料ホームページ作成講座ブログ
アクセスアップは相互リンクで 相互リンクドクター!アクセスアップ ホームページ登録(サーチエンジン登録) ホームページ作成 ランキング ページビューランキング 幸福の羅針盤ランキングに参加してね
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。