CSS リストマーク
先日リストマークのズレについて質問がありました
リストマークの付け方も説明しておきます
リストマークってなに？
サイドバーの中の項目はHTMLは ul li のリスト形式で書かれています
その頭につけるマークなんで・・・リストマーク
カンタンにはスタイルにlist-style-typeを指定します
・・・これは種類も少ないし、マークと文字のズレが訂正できません
それにアメブロのCSSでlist-style: none;で表示しないように設定されています
ここでは小粋空間さんが紹介された背景画像を使ったリストマークを説明します
アメブロで記事を書くときに使う絵文字を使った例です
http://stat.ameba.jp/blog/ucs/img/char/char2/061.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
http://stat.ameba.jp/blog/ucs/img/char/char2/118.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
http://stat.ameba.jp/blog/ucs/img/char/char2/148.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
CSSの最後にコピペしてください
/* リストマーク */
.menu_frame ul {/* 全体の位置 */
list-style: none;
margin-left: 5px;/* 注1 */
}
#reader li {/*reader : 読者一覧*/
margin: 0;
padding-left: 16px;/*画像横+α 注2 */
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上 注3 */
}
#bookmark li {/*bookmark : ブックマーク*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#favorite li {/*favorite : お気に入りブログ*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_entries li {/*recent_entries : 最新の記事*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_comment li {/*recent_comment : 最近のコメント*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#theme_list li {/*theme_list : ブログテーマ一覧*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#archives li {/*archives : アーカイブ*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
注1 と 注２ の位置関係
小さな画像を使うとやはりズレが気になります・・・
注3 の位置関係
[一覧を見る] がジャマになる場合は右寄にします
/* [一覧を見る]を右に */
.menu_frame p.list{
text-align: right;
padding-right: 15px;
}
ココにも使えそうなアイコンがいっぱいあります
Free Tiny Small Mini Icons Bullets:
http://icons.primail.ch/
自分で作った画像でも可能です
その場合、文字のサイズに合うサイズで作ってください
参考：
小粋空間: リストマークの画像のずれを修正する
http://www.koikikukan.com/archives/2005/06/14-235902.php