こんにちは。YOSHITAKA(@YOSHITA19704216)です。
『クリック済みのリンク』と『まだクリックしていないリンク』がわかるようにしたいです。
リンクの色を変更する事によって、今までクリックしたものかわかります。
そのほかカーソルが文字の上にいっているかなどもわかります。
- テキストリンクの色を変える方法がわかります。
- CSSの変更情報の基礎が知っている人はすぐにみつかります。
Contents
テキストリンクの色を変更する方法
テキストリンクの色の変更場所
4タイプについての動作をCSSで指定する事が可能です。
簡単に言えば・・・・・・
全部色を変えれるということです。
- クリック前
- クリック後
- マウスオーバー時
- クリック時
アメブロのCSSでCheckすること
CSSの編集で探してみてください。
定義済みのクラスとして、普通に使う事が可能です。
CSSでアメブロのCSSに貼り付け
color: #111111;
}
a:visited {
color: #222222;
}
a:hover {
color: #333333;
}
a:active {
color: #444444;
}
ポイント
- a:link → クリック前の、リンクされた状態
- a:visited → クリック後の、訪問済みの状態
- a:hover → マウスが重なった時の状態
- a:active → マウスをクリックした時の状態
もちろん、文字色だけではなく、次の事も変更が可能です。
詳しく知りたい方は検索してみて下さい。
ポイント
下線の有無
ボーダーの指定
背景色の指定
記述には順番がありますが
全てを指定しなくても大丈夫です。
記述のルールなど
但し・・・・・
上記の順番で書かなければ機能しない事もあります。
つまり・・・・
visitedよりも前にhoverは指定できない
などがあります。
- linkとvisitedだけの指定
- link、hover、activeの3つの指定だけは可能です。
まとめ
簡単にCSSの変更のきっかけを伝えました。
テキストリンクを変えるだけでクリックされる割合が変わると言われています。
少し工夫して加工してみて下さい(^^)