リンク設定のスタイルシート（CSS）

初心者のためのスタイルシート講座（CSS）

いろいろな方から、ブログのカスタマイズに関するご質問を頂きますが、なかなかすぐにはお答えできませんので、できる範囲で少しずつ、ブログのカスタマイズに関する事を、ご紹介させて頂きます。

とりあえず今回は、「リンク表示設定のスタイルシート」です。

■リンクする要素に対してスタイルを適用します
/* 記述例 */
a {
text-decoration: underline; color:#0000ff;
}

リンクするテキストにアンダーラインを表記し、青字で表示する
（underline ⇒ none　；アンダーラインを表記しない）

■リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します
/* 記述例 */
a:link {
color : #ff6633!important;
}
（important＝サイト制作者のスタイルよりもユーザーが設定した色を優先する）

■リンクする要素のうち、閲覧済（キャッシュされている）要素に対してスタイルを適用します
/* 記述例 */
a:visited {
color : #ff8800 !important; text-decoration: none;
}

閲覧済リンクテキストにアンダーラインを表記せず、オレンジ色で表示する

■リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します
/* 記述例 */
a:hover {
color : #ff0000 !important; text-decoration: underline;
}

未閲覧リンクテキストにアンダーラインを表記し、赤色で表示する

■カーソルをその要素の上に置いているが、まだアクティブ状態でない時のスタイル
/* 記述例 */
a:hover {
color : #ff3333 !important; text-decoration: underline;
}

■アクティブ状態にされた時（クリックした時）のスタイル
a:active {
color : #ffff00 !important;
}


記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！