各画面のリンク色の変更
ここで編集しているもの以外にもリンク色の変更が出来るものもありますが（カレンダーなど）リンクが無い場合（テキスト）と一緒に編集できるようになっているので、別の機会があれば。
書き換えに関しての詳細は「
スタイルシートについて考える」を御参照ください。
赤い文字の部分が編集項目です。
/*/～/*/はコメントアウト
あくまで自己責任でお願いします。
クラス:link /*/ 通常のリンクの状態 /*/
クラス:visited /*/ 訪問済みのリンクの状態 /*/
クラス:active /*/ クリック時のリンクの状態 /*/
クラス:hover /*/ onmouseover（カーソルがリンクの上にある状態） /*/
○属性color:
■値
□カラーコード
16進数(#000000など)
カラーネーム(Black)など
○属性
text-decoration: テキスト文字の特性
■値：
none 何も無い状態（初期値）指定していない状態と同じ
underline 文字の下に線が付きます。
overline 文字の上に線が付きます。
line-through 文字に打ち消し線が入ります。
以下書き換え例です。
/*/----------------------------------------------------------------------/*/
/*/------------------------------リンクの編集----------------------------/*/
/*/----------------------------------------------------------------------/*/
/*/---CSSで指定されていない文字---/*/
/*/■プロフィールのページ/オークション一覧の文字列 県リンク・お友達 ■ブログのページ/コメント内のリンク トラックバックリンクのリンク■愛車紹介/車種名■フォトギャラリー/タイトル等/*/
a
{
color:
#ffffff;
text-decoration:
underline;
}
a:link /*/ 通常のリンクの状態 /*/
{
color:
#ffffff;
text-decoration:
underline;
}
a:visited /*/ 訪問済みのリンクの状態 /*/
{
color:
#F1F0C2;
text-decoration:
underline;
}
a:active
{
color:
#ffffff;
}
a:hover /*/ onmouseover（カーソルがリンクの上にある状態） /*/
{
color:
#FFFF66;
text-decoration:
underline;
}
/*/-----ヘッダーのタイトルのリンク-------/*/
#Header a
{
color:
#000000;
text-decoration:
none;
}
#Header a:link
{
color:
#000000;
text-decoration:
none;
}
#Header a:visited
{
text-decoration:
none;
}
#Header a:active
{
}
#Header a:hover
{
color:
#EEEEEE;
/*/ text-decoration: underline; リンクのアンダーラインはコメントアウトでtext-decoration: underline;と同じ意味です。/*/
}
/*/---------- ブログタイトルのリンク --------/*/
a.LinkTitle
{
color:
#EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:link
{
color:
#EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:visited
{
color:
#EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:active
{
}
a.LinkTitle:hover
{
color:
#FF0000;
/*/ text-decoration: underline;/*/
}
/*/-----プロフィールページの最新ブログ、最新パーツレビュー、最新整備手帳 ブログやお友達一覧などのメニュー項目での自分の名前と県名、なぜかﾌﾟﾛﾌｨｰﾙの写真にも など-----/*/
a.LinkMenu
{
font-size:
11px;
color:
#ffffff;
text-decoration:
none;
}
a.LinkMenu:link
{
font-size:
11px;
color:
#ffffff;
text-decoration:
underline;
}
a.LinkMenu:visited
{
font-size:
11px;
color:
#ffffff;
text-decoration:
underline;
}
a.LinkMenu:active
{
}
a.LinkMenu:hover
{
font-size:
11px;
color:
#FF0000;
text-decoration:
underline;
}
/*/----- プロフィールページ以外のリンクタブ文字 --------/*/
a.LinkTabActive
{
color:
#FFFFFF;
text-decoration:
none;
font-weight:
bold;
}
a.LinkTabActive:link
{
color:
#FFFFFF;
text-decoration:
none;
font-weight:
bold;
}
a.LinkTabActive:visited
{
color:
#FFFFFF;
text-decoration:
none;
font-weight:
bold;
}
a.LinkTabActive:active
{
}
a.LinkTabActive:hover
{
color:
#FFFFFF;
text-decoration:
underline;
font-weight:
bold;
}
/*/----- プロフィールページのリンクタブ --------/*/
a.LinkTabInactive
{
color:
#F8F8F8;
text-decoration:
none;
font-size:
12px;
}
a.LinkTabInactive:link
{
color:
#F8F8F8;
text-decoration:
none;
font-size:
12px;
}
a.LinkTabInactive:visited
{
color:
#F8F8F8;
text-decoration:
none;
font-size:
12px;
}
a.LinkTabInactive:active
{
color:
#F8F8F8;
text-decoration:
none;
font-size:
12px;
}
a.LinkTabInactive:hover
{
color:
#F8F8F8;
text-decoration:
underline;
font-size:
12px;
}
Posted at 2008/04/01 12:47:05 | |
トラックバック(0) |
スタイルシート(CSS) | パソコン/インターネット
