【初心者向け】WordPressのリストを「※（米印）」に変更する方法｜CSSだけで簡単カスタマイズ

WordPressでリストを使うと、通常は黒丸（・）や番号が先頭に表示されますよね。
でも、注意書きや補足を目立たせたいときに「※（米印）」を使いたいこともあるのではないでしょうか？

この記事では、CSSだけでリストの先頭を「※」や「※＋番号」に変更する方法を初心者向けにわかりやすく解説します。

---

この記事でわかること

• リストの先頭を「※（米印）」に変える方法
• CSSを使ったカスタマイズ方法
• WordPressエディターでの具体的な設定手順

---

なぜリストの先頭を「※」に変えたいのか？

「※」は、文章中で補足や注釈を加えるときによく使われる記号です。
読者に注意を促したり、重要な情報を目立たせたいときに便利です。

しかし、WordPressのリストではデフォルトで黒丸や番号が使われるため、「※」に変更したい場合は少し工夫が必要です。

---

CSSを使って「※」に変更する方法

CSSの追加手順（style.cssに追記）

1. WordPress管理画面で「外観」→「テーマファイルエディター」を開きます。
2. 右側の「スタイルシート（style.css）」を選択します。
3. 以下のCSSをコピー＆ペーストして、「ファイルを更新」ボタンをクリックします。

※注意：直接編集する場合は、必ず子テーマのstyle.cssに追記してください。親テーマに書き込むと、テーマ更新時に上書きされてしまいます。

---

箇条書きリストを「※」にするCSS

/* リストの先頭を「※」にする */
ul.note-list {
  list-style: none;
}

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

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

---

番号付きリストを「※＋番号」にするCSS

/* リストの先頭を「※+番号」にする */
ol.note-list {
  list-style: none;
  counter-reset: count;
}

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

ol.note-list li::before {
  content: "※" counter(count) "";
  counter-increment: count;
  margin-right: 0.5em;
}

---

WordPressでの使い方

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

1. 投稿や固定ページの編集画面を開きます。
2. 「リスト」ブロックを追加します。
3. 右側の「ブロック」設定 →「高度な設定」を開き、「追加CSSクラス」に note-list と入力します。

• 箇条書きリストの場合：黒丸が「※」に変更されます。
• 番号付きリストの場合：「1.」「2.」が「※1」「※2」に変わります。

コードエディターの場合

以下のようにHTMLに直接クラスを追加します。

<!-- 箇条書きリスト -->
<ul class="note-list">
  <li>注意点その1</li>
  <li>注意点その2</li>
</ul>

<!-- 番号付きリスト -->
<ol class="note-list">
  <li>手順その1</li>
  <li>手順その2</li>
</ol>

---

よくある質問（FAQ）

---

まとめ｜CSSだけで簡単に「※」スタイルを実現しよう！

プラグインを使わずに、CSSだけでリストの先頭を「※」や「※＋番号」にカスタマイズする方法をご紹介しました。

「ちょっとしたデザインのこだわり」が、ブログやサイトの印象をぐっと引き上げてくれます。

ぜひ、あなたのWordPressサイトでも取り入れてみてくださいね！