CSS リンク・リンク文字色
最近・・・・
コメント・プチメでリンクの文字色についての質問が続いています
で、リク記事です
最初に・・・・
リンク下線は「そこがリンク」という重要なマークです
マウスをあわせて初めてリンクだとわかるような
あるいはマウスをのせてもわからないようなリンクスタイルは
見に来てくれた方にとって非常に迷惑です・・・・
それをわかった上でトライください
リンク文字色
アメブロのＣＳＳはリンクの文字色を設定していないスキンが多くあります・・・
ですので
文字色を変更したのに青字ばかりだ・・・・
紫の文字は何とかしてくれ～
って問い合わせが多くあります
上の注意をおさらいすると・・・
青字はリンクを表します
紫の文字はアクセス済みのリンクです
またマウスをのせると下線が現れる場合もあります
CSSで設定していませんのでパソコンのシステム設定の色で表示されます
アクセシビリティ（バリアフリー）の観点からもわかりやすいリンクは重要です！
a:link {/* 未訪問のリンク */
color: #0000ff;
}
a:visited { /* 訪問済みのリンク */
color: #ff00ff;
text-decoration: none; /* 下線を消す */
}
a:hover { /* カーソルが上にある時のリンク */
color: #ff0000;
text-decoration: none; /* 下線を消す */
}
みなさまに教えていましたのはココまでです
でももう一つあるんです
a:active { /* クリック時のリンク */
color: #00ff00;
}
クリックした瞬間のスタイルです・・・
ほとんど気が付きませんので教えていませんでしたが
チャレンジしてみてください
（IE未対応なので使ったことありませんがfocusって～のもあります・・・が、違いがよくわかりません）
a:link
a:visited
a:hover
a:active
の記述順も大事ですよ～
ちなみに よく aタグ って言われているのがこれらのことです
未訪問時はオレンジ、訪問済みの場合は緑、カーソルがのるとピンクで、クリックしたときは黄色
↑ 一度クリックするとブラウザーのキャッシュをクリアにしない限りは訪問済みの緑になります
クリックを長く押していると a:active の黄色がわかると思います
a:link {/* 未訪問のリンク*/
color: #ff9900;/*オレンジ*/
}
a:visited { /* 訪問済みのリンク*/
color: #00ff00;/*緑*/
text-decoration: none; /* 下線を消す */
}
a:hover { /* カーソルが上にある時のリンク*/
color: #ff33ff;/*ピンク*/
text-decoration: none; /* 下線を消す */
}
a:active { /* クリック時のリンク*/
color: #ffff00;/*黄*/
}
※下線をつけるのは text-decoration: underline;
ここまでは基本です
とは言っても・・・・
かわったリンクスタイルにしてみたい・・・・
他の人とは違ったリンクにしたい・・・
↓はカーソルがのったときのリンクスタイル色々です・・・ a:hover のCSSいろいろです
カーソルを載せるだけでクリックはしないでくださいね・・・飛んじゃいますから・・・
a:hover {
color: #ff33ff;
text-decoration: underline; /* 下線をつける */
}
a:hover {
color: #ff33ff;
text-decoration: none; /* 下線を消す */
border-bottom: 1px dotted #ff00ff;
}
※IE6では1pxの点線は破線にみえます
a:hover {
color: #ff33ff;
text-decoration: none; /* 下線を消す */
border-top: 1px dashed #ff00ff;
border-bottom: 1px dashed #ff00ff;
}
a:hover {
color: #ff33ff;
text-decoration: none; /* 下線を消す */
position:relative;
top: 1px;
left: 1px;
}
a:hover {
color: #ffffff;
text-decoration: none; /* 下線を消す */
background-color:#ff00ff;
}
a:hover {
color: #000000;
text-decoration: none; /* 下線を消す */
padding: 2px;
background-color:#ff00ff;
border: 1px inset #ff0000;
}
a:hover {
color: #ffffff;
text-decoration: none; /* 下線を消す */
padding-bottom: 3px;
background-image: url(画像のURL);
background-repeat:repeat-x;
background-position:bottom;/*画像位置 下 */
}
このブログのサイドのように訪問前と訪問済みで画像を変えることも出来ます
CSS リストマーク 2
←コチラにやりかたがあります参考にして下さい
ココの部分だけ リンクスタイルを変えたい・・・
あるいはある一部にだけリンクスタイルを設定したいって～場合・・・・
1つのリンクだけ変えたい場合
CSSは
a.koko:link {color:#ff00ff;}
a.koko:visited {color:#00ff00;}
a.koko:hover {color:#ff0000;}
HTMLは
<a class="koko" href="リンク先のURL">このリンクだけ変える場合</a>
※この上でリンクの種類の説明はこの方法でそれぞれのリンクスタイルを変えています
ある一部にリンクスタイルを適用させるには
CSSは
.koko a:link {color:#ff00ff;}
.koko a:visited {color:#00ff00;}
.koko a:hover {color:#ff0000;}
HTMLは
<div class="koko">
<a href="リンク先1のURL">リンク1</a>
<a href="リンク先2のURL">リンク2</a>
<a href="リンク先3のURL">リンク3</a>
</div>
こうすると3つのリンク全部にスタイルが適用されます
サイドバーで言えば・・・・
すでに使っておられる方もありますが
記事のある日付
#calendar td a {/*記事のある日付*/
color:#333333;/*文字色*/
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center;
display: block;
}
記事のある日付にマウスがのったとき
#calendar td a:hover {/*マウスオーバー*/
color:#666666;/*文字色*/
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center;
display: block;
}
これはカレンダーの記事のある日付のリンクスタイルをまとめて設定しています
サイドバーのカレンダーですからHTMLはさわらなくても良いようにCSSで設定します
たとえばサイドの最近のコメントだけリンクスタイルを変えたいときは・・・CSSに
#recent_comment a:link {color:#ff00ff;}
#recent_comment a:visited {color:#ff00ff;}
#recent_comment a:hover {color:#ff0000;}
※これらを書くときは はじめに説明した基本のCSSより下に書く必要があります
※またメニューに使う場合は前に説明しましたロールオーバーのようにもっと別に方法もあります
私が作った画像ですから自由にお持ち帰りください
名前を付けて保存 → 自分のブログの画像フォルダにアップして使ってください