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より下に書く必要があります
※またメニューに使う場合は前に説明しましたロールオーバーのようにもっと別に方法もあります
私が作った画像ですから自由にお持ち帰りください
名前を付けて保存 → 自分のブログの画像フォルダにアップして使ってください
CSS コメントタイトルの■をアイコンにしちゃうよ
アメブロによりコメントに№が付くようにされたため
この方法は使えなくなりました
-----------------------------------------
コメントタイトルの■をアイコンにしちゃいます
コチラ も参考にして下さい
普通のコメントの状態
■を消しました？
タイトルを動かしてアイコンをいれました
下の画像を参考にしてＣＳＳの最後に
/*コメントタイトルの■を消す*/
.label:first-letter {
color:#ffffff;/*■の色*/
font-size:1px;
}
/*コメントタイトル*/
#comment_module .label{
padding-left:20px;/*タイトルを右にずらす*/
background-image:url(画像のURL);/*アイコン画像*/
background-repeat:no-repeat;
background-position: 0px 0px;/*右に 下に*/
}
※padding-leftにアイコンの幅＋余裕分の数字を入れてタイトルを右にずらして
アイコンを配置するスペースを作ります
※.label:first-letter { の部分で { の前のスペースを消すとIEで■が消えません
.label:first-letter{ ←なぜかこれでは消えません （IE以外では消えます）
↑ここではわかるように■の色を白にしていますが
背景の色と同じにするか、背景画像に似た色にすれば消えたように見えます
自分のコメントを ”もっと” わかりやすく
を利用してゲストさまと管理人コメントを分けている場合は
/*管理人コメントタイトル*/
#comment_module .admin_comment .label{
padding-left:20px;/*タイトルを右にずらす*/
background-image:url(画像のURL);/*アイコン画像*/
background-repeat:no-repeat;
background-position: 0px 0px;/*右に 下に*/
}
↑ゲストさまと管理人コメントを分けていない場合はコチラのＣＳＳは必用ありません
↓ゲストさまと管理人コメントを分けている場合で背景色が違う場合は
#comment_module .each_comment .label:first-letter {
color:#000000;/*ゲスト■の色*/
font-size:1px;
}
#comment_module .admin_comment .label:first-letter {
color:#ff0000;/*管理人■の色*/
font-size:1px;
}
アイコンとタイトルの位置が合わない場合は
background-position: 0px 0px;/*右に 下に*/
ここでアイコンの位置を動かして合わせます
最初の数字で右に動き、次の数字で下に動きます
今回は上の画像のようにアイコンが少し下に表示されていますので
background-position: 0px -1px;/*右に 下に*/
と、上に1px上げました マイナスで反対に動きます
※このブログのようにコメント位置を大幅に変更している場合は
padding-left:20px;/*タイトルを右にずらす*/とタイトルを右に動かすだけではなく
padding-top:15px;/*タイトルを下にずらす*/と下にも動かす必要がある場合もあります
もちろんbackground-position: 0px 0px;/*右に 下に*/も大幅に動かす必要もあるかもです
どちらにしても見ながら調整してください
また・・・タイトルの文字色を変更したい場合は
この中に color:#ff00ff;/*文字色*/ を加えれば変更できます（色は好きな色に変更してください）
/*コメントタイトル*/
#comment_module .label{
padding-left:20px;/*タイトルを右にずらす*/
padding-top:15px;/*タイトルを下にずらす*/
color: #ff00ff;/*タイトル文字色*/
background-image:url(画像のURL);/*アイコン画像*/
background-repeat:no-repeat;
background-position: 0px 0px;/*右に 下に*/
}
また画像を使う場合は・・・