WordPressでリストの先頭を※（米印）にする方法

WordPressのリストの先頭は基本的に黒丸（・）ですが、場合によって”※”（米印・アスタリスク）にしたい場合があると思います。

プラグインなどもありますが、今回はCSSだけで、リストの先頭を以下のように、※（米印・アスタリスク）にする方法です。

CSSの設定

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

設定方法

1. ダッシュボードで「外観」「テーマファイルエディター」をクリックします。

2. 「テーマファイル」で「スタイルシート」が選択されていることを確認し、次の章の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;
}

使い方

ビジュアルエディターの場合

1. ブロックで、「リスト」を選択します。

2. リストの先頭を「※」にする場合は「箇条書きリスト」を選択し、リストの先頭を「※＋番号」にする場合は「番号付きリスト」を選択します。

3. 「設定」の「ブロック」で、「高度な設定」を開き、「追加CSSクラス」へ「asterisk」を入力します。

コードエディターの場合

以下のように、ulタグ、olタグのクラスに「asterisk」を設定します。

<!-- 先頭が「※」の場合 -->
<ul class="asterisk">
    <li>リスト</li>
</ul>

<!-- 先頭が「※＋番号」の場合 -->
<ol class="asterisk">
    <li>リスト</li>
</ol>

まとめ

プラグインで対応をしても良いと思いますが、CSSだけで簡単にできますので是非試してみてください。