箇条書きについて

WordPressでの箇条書きについて

 
WordPressで”Twenty Sixteen”のテーマで箇条書き(ul,li)をすると、本文の開始位置より前にビュレットがくる。このビュレットを本文枠に入れる方法などについてメモ。
 

箇条書き

 
例えば、”Twenty Sixteen”のテーマで、普通にul, liタグで箇条書きをすると図のように表示される。

<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

bullet_01
 
そこで、<ul style=”margin-left:○em;”>~</ul>として、○文字分のマージンを設けてやれば本文枠に収まる。
bullet_02
 

マーカーの種類

 
マーカーの種類は、”list-style-type”で指定する。以下は、その表示例。
 
<ul style=”list-style-type: none”>~:マーカーなし

  • test1
  • test2
  • test3

<ul style=”list-style-type: disc”>~:黒丸

  • test1
  • test2
  • test3

<ul style=”list-style-type: circle”>~:白丸

  • test1
  • test2
  • test3

<ul style=”list-style-type: square”>~:黒四角

  • test1
  • test2
  • test3

<ol style=”list-style-type: lower-roman”>~</ol>:小文字のローマ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-roman”>~</ol>:大文字のローマ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-greek”>~</ol>:小文字のギリシャ文字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: decimal”>~</ol>:算用数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: decimal-leading-zero”>~<ol>:算用数字(先頭に0)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-latin”>~</ol>:アルファベット(1)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: lower-alpha”>~</ol>:アルファベット(2)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-latin”>~</ol>:アルファベット(3)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: upper-alpha”>~</ol>:アルファベット(4)

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: cjk-ideographic”>~</ol>/strong>:漢数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hiragana”>~</ol>:あいうえお順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: katakana”>~</ol>:アイウエオ順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hiragana-iroha”>~</ol>:いろは順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: katakana-iroha”>~</ol>:イロハ順

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: hebrew”>~</ol>:ヘブライ数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: armenian”>~</ol>:アルメニア数字

  1. test1
  2. test2
  3. test3

<ol style=”list-style-type: georgian”>~</ol>:グルジア数字

  1. test1
  2. test2
  3. test3

 
スポンサーリンク