スポンサーリンク

WordPressでリストの先頭をアスタリスクにする方法

リストの先頭を、※(米印・アスタリスク)にする方法です。

CSSを設定しておくことで、リストや番号付きリストで先頭をアスタリスクにすることが簡単にできます。

CSS

/* リストの先頭をアスタリスクにする */
ul.asterisk {
  list-style: none;
}

ul.asterisk li {
  text-indent: -1.5em;
}

ul.asterisk li::before {
  content: '※';
  margin-right: 0.5em;
}

/* リストの先頭をアスタリスク+番号にする */
ol.asterisk {
  list-style: none;
  counter-reset: count 0;
}

ol.asterisk li {
  text-indent: -2.2em;
  margin-left: .7em;
}

ol.asterisk li::before {
  content: "※" counter(count) "";
  counter-increment: count 1;
  margin-right: 0.5em;
}
  • テーマや他のCSSによって位置はズレるので、22、23行目で位置は調整を行ってください。

使い方

  1. ブロックで、リストを選択します。
  1. 先頭にアスタリスクのみにする場合は、「箇条書きリスト」を選択します。
  1. 先頭にアスタリスクと番号をつける場合は、「番号付きリスト」を選択します。
  1. 「設定」の「ブロック」で、「高度な設定」を開き、「追加CSSクラス」へ「asterisk」を入力します。
スポンサーリンク
レンタルサーバー
おすすめの記事