デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。

ちなみに私は『ピーチ/2コラム-記事右」を選択しています。

 

ポインタが、リンクの上に来たとき、文字の下に実線がでます。

 

ヾ(´▽`*)ゝ ここ、カスタマしちゃいます。

 

↓↓↓↓ 元のソース

/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}
body#mainIndex {
margin: 0;
padding: 0;
text-align:center;
}
#frame{
text-align:left;
}
#sub_a,#sub_b,#main{
padding-top:15px;
}
img {
border: 0;
}
a {
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline} ←ここを変更します。(underline→下に線が入ります)
input,textarea{font-size:12px}
ul,ol,dl,li,dt,dd{
list-style-type:none;
}
/* ----------------------- header ----------------------- */

 

 

◆リンクの文字の上と下に線をつけます。

 

 a:hover {text-decoration: overline underline}

 

◆リンクの文字の後ろに色をつけます。

 

 a:hover {background-color : #ffe5e5}  ←赤い部分はカラーコードです。自由に変えてください。

 

◆リンクの文字の上下に線をつけて、文字の後ろに色をつけます(上2つを一緒にする場合)

 

 a:hover {text-decoration: overline underline;  background-color : #ffe5e5;}  

 

◆リンクの文字の下に点線をつけて、その点線に色をつけます。

 

  a:hover {border-bottom: 1px dotted #ff2899} 

 

      カラーコード線の種類線の太さは自由に変更してください。

 

◆リンクの文字を動かします。

 

  a:hover {position: relative;  top: 1px;  left: 1px;} 

   から①下げて、左から①右へ動かすと言う意味です。数字は自由に変えてください。

 

◆リンクの文字の周りに枠(点線)と色をつけます。(ココで使っているものです)

 

  a:hover {background-color : #ffe5e5 ;
  border-bottom: 1px dotted #ff2899;
  border-right: 1px dotted #ff2899;
  border-top: 1px dotted #ff2899;
  border-left: 1px dotted #ff2899;
}

 

    カラーコード線の種類線の太さは自由に変更してください。