サイドバーのリストにアイコンをつけます
旧ベーシックのときのは CSS リストマーク
/* リストマーク */
.readerMenu .skinSubList li {/*reader : 読者一覧*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.bookmarkMenu .skinSubList li {/*bookmark : ブックマーク*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.favoriteMenu .skinSubList li {/*favorite : お気に入りブログ*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.recentEntriesMenu .skinSubList li {/*recent_entries : 最新の記事*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.recentCommentMenu .skinSubList li {/*recent_comment : 最近のコメント*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.themeMenu .skinSubList li {/*theme_list : ブログテーマ一覧*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.archiveMenu .skinSubList li {/*archives : アーカイブ*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
以前の記事では訪問済みのリストに別のアイコンをつける場合は・・・ってありますが
セキュリティ上の問題があることがわかりa:visited(訪問済み)の背景画像は使えなくなるブラウザが増えているそうです
なので最新のほとんどのブラウザーでは使えなくなります
・・・それでは面白くないので？
a:hover に変えるとマウスがのったときにアイコンが変わります
注意！ ↓下のＣＳＳは全部のアイコンを同じ画像でやる場合です
それぞれで別の画像を設定する場合は上のＣＳＳに a と a:hover をつけたＣＳＳをそれぞれ書いてください
/*リストマーク*/
.skinSubList li a{
padding-left:20px;/*画像横+α*/
padding-top:3px;/*上Ａ*/
padding-bottom:3px;/*下Ｂ*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
.skinSubList li a:hover{/*マウスオーバー時*/
padding-left:20px;/*画像横+α*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:0px 0px;/*画像位置 横 上*/
}
この場合・・・
画像が全部表示できない場合は Ａ と Ｂ を大きくすれば表示できます
コレがなくても画像が全部表示できるときは
padding-top:3px;/*上Ａ*/
padding-bottom:3px;/*下Ｂ*/
この部分を削除するか
padding-top:0;/*上Ａ*/
padding-bottom:0;/*下Ｂ*/
0 にするかしないと・・間隔が広がりすぎになります・・