WordPressの箇条書きについて

WordPressで箇条書きを設定すると、下書きだと

と段落が下がって表示されるが、実際に表示させると

  • リストの項目 1
  • リストの項目 2
  • リストの項目 3

上のように文章の先頭位置よりも左に●が表示されてしまう。これがどうしても気になる。

対策

解決にはCSSを追加して調整するという方法もあるが、CSSを追加すると他の人の投稿にも影響があったり、
そもそも権限がなかったりで難しい。

別のアプローチとして「カスタムHTML」での調整ならできそうだったので実施。

<ul style="padding-left: 30px;">
  <li>リストの項目 1</li>
  <li>リストの項目 2</li>
  <li>リストの項目 3</li>
</ul>

カスタムHTMLにて上記のように記載すれば

  • リストの項目 1
  • リストの項目 2
  • リストの項目 3

と、表示させたかった位置に●を表示させることができた。

応用として、階層をさらに下げる場合は

<ul style="padding-left: 30px; list-style-type: disc;">
  <li>リストの項目 1</li>
  <li>リストの項目 2
    <ul style="padding-top: 5px; margin-bottom: 5px; list-style-type: circle;">
      <li>リストの項目 2-1</li>
      <li>リストの項目 2-2</li>
    </ul>
  </li>
  <li>リストの項目 3</li>
</ul>

とすると

  • リストの項目 1
  • リストの項目 2
    • リストの項目 2-1
    • リストの項目 2-2
  • リストの項目 3

上のように表示させることができた。