CSSで左に飛び出した黒丸リスト部分を他の文章や画像と揃える

広告
olやulタグを使って一覧などのリスト表示をすると、リストの前に黒丸や数字が付きますが、他の文章や画像よりも左に飛び出して表示されます。CSSに追記すれば雑誌や書籍のように体裁を整えることができます。

邦文では左側を揃えたい

リスト表示2

英文では普通でも邦文では奇異な感じを受ける方も多いと思います。
ちなみに、リスト表示には「ul」と「ol」が使われ、「ul」はUnordered Listの略で順序のないリスト表示をし、「ol」はOrdered Listの略で順序を付けたリスト表示をします。
ちなみに、順序に使われる見出し文字や記号の属性は以下のようになります。

.ol
list-style: none (記号なし)
list-style: disc (先頭に黒丸)
list-style: circle (先頭に白丸)
list-style: square (先頭に黒四角)

.ul
list-style: decimal (算用数字)
list-style:decimal-leading-zero; (先頭に0をつけた算用数字)
list-style:lower-roman; (小文字のローマ数字)
list-style:upper-roman; (大文字のローマ数字)
list-style:lower-alpha; (小文字のアルファベット)
list-style:upper-alpha; (大文字のアルファベット)
list-style:lower-greek; (小文字のギリシャ文字)

さて、WordPress(Twentytwelve)のリストを他の文章や画像と同じ左揃えするには、cssの830行め辺りの
.entry-content ul,
.comment-content ul,
.mu_register ul {
	list-style: disc outside;
}
.entry-content ol,
.comment-content ol {
	list-style: decimal outside;
}

の「list」の属性の「outside」部分を「inside」に変えて
.entry-content ul,
.comment-content ul,
.mu_register ul {
	list-style: disc inside;
}
.entry-content ol,
.comment-content ol {
	list-style: decimal inside;
}

のようにすると以下のようになります。
リスト表示2
なお、<li>で表示されるリストの「・(中黒/黒い点)」を消すには、
.li {
list-style-type:none;
}
を加えることもできます。
広告


広告