CSS リストマーク 2 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS リストマーク 2

今度は・・・・

このサイトみたいに

未訪問のリンクと訪問済みのリンクでリストマークを変えます

もしサイドのリストマークが ばかりでしたら

どこかクリックしてみてください

訪問済みとなりリストマークが に変わるはずです





最新の記事 の場合  CSSの最後にコピペ


#recent_entries li a:link {/*recent_entries : 最新の記事*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_entries li a:visited {/*訪問済み*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}


2つの画像の大きさは同じくらいの画像を選んでください


ドキドキ 訪問前   ラブラブ 訪問後    ・・・・ドキドキ から ラブラブ へ


 おにぎり 訪問前   うんち 訪問後   ・・・おにぎり から ・・・っん?



・・・こうするとマウスが乗った時だけ変ります


#recent_entries li a:hover {/*ポイント時*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}


※記入の順番があります

 a:link  a:visited  a:hover  の順番で記入しないとうまくいかない場合があります


※この方法ですと2行にわたる場合マークに下に文字が入り込みます

 綺麗に揃えたいって方はameba-customのハチ さま の記事を参考にしてください



CSS リストマーク