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のハチ さま の記事を参考にしてください