ワードプレスの箇条書きリストデザイン／点の色を変えるカスタマイズ（ul要素）

箇条書きリストのデザインはデフォルトではシンプルな黒い点（ディスク）が表示されます。このデザインをカスタマイズして、箇条書きの点の色を変更する方法を解説します。

• リスト１
• リスト２
• リスト３

サイトのメインカラーとリストに統一感をだしたいときにおすすめ。

可愛いカラーの箇条書きリストを作りたい方はご覧ください。

About me

この記事を書いた人

はっちゃんです

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計310件（月間約20件）購入いただきました

箇条書きリストデザインのカスタマイズイメージ

以下のように、箇条書きの点の色や形を変更することができます。

この記事ではCSSを使用します。

作業前にはバックアップをおこない、編集は子テーマを使用しましょう。

CSSの記述について

子テーマのスタイルシートを使用します。

1. 管理画面の「外観」から「テーマファイルエディター」をクリック
   • Cocoon Child: スタイルシート (style.css) のページが開きます
2. 元から書いているコード（テーマ情報）は消さずにCSSを記述します
   • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認します

参考記事 Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTMLで箇条書きを作る方法

HTMLを使って箇条書きリストを作成するには、以下のタグを使用します。

基本的に、<ul> + <li> または <ol> + <li> のセットで使用します。

ブロックエディタではリスト機能を選ぶだけで、自動的にHTMLが生成されます。

タグの使い方例

番号なしのリスト（<ul>タグ）

番号のない箇条書きを作る場合、<ul>タグで全体を囲み、各項目を<li>タグで囲みます。

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

番号ありのリスト（<ol>タグ）

番号付きの箇条書きを作る場合は、<ol>タグを使用します。

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>

箇条書きのリストデザイン／点の色を変える３つの方法

番号なしリストの先頭につく点（・）をカスタマイズするには３つの方法がありますが、基本的に①②の擬似要素を使う方法だけ覚えておけば困りません。

ひとつずつ紹介します。

①疑似要素::beforeを使う 推奨

::beforeを使用すればリストアイテムの前にデザインを自由に追加できます。この方法はブラウザの制限がなく、ほぼすべてのデザインに対応できるため最もおすすめです。

箇条書きを作ってクラスを設定するだけ。

CSSの設定

以下のCSSコードを子テーマのスタイルシート（style.css）に追加します。

/* カスタマイズされたリストの点 */
.ullist {
    list-style: none; /* デフォルトの点を消す */
    line-height: 1.8; /* 行間を広げる */
}

.ullist > li { 
    position: relative; /* 点の配置基準 */
}

.ullist > li:before {
    content: ''; /* 点の内容を空に */
    background-color: pink; /* 点の色 */
    position: absolute; /* 点の位置 */
    top: 11px; /* 垂直位置の調整 */
    left: -1em; /* 水平位置の調整 */
    width: 7px; /* 点の幅 */
    height: 7px; /* 点の高さ */
    border-radius: 50%; /* 点を丸くする */
}

このCSSコードは、箇条書きの前に「ピンクの丸い点」を表示するためのものです。

クラスの追加方法（ブロックエディタの場合）

箇条書きを作ってクラスを追加し、リストデザインを反映させます。

1. リストの親要素（ul タグ）を選択します。
2. サイドメニューの「高度な設定」→「追加CSSクラス」に ullist を入力します。

これだけでOK！！

以下のHTMLコードが作られ、カスタマイズが反映されます。

<ul class="ullist">
   <li>1つめの項目</li>
   <li>2つめの項目</li>
   <li>3つめの項目</li>
</ul>

See the Pen list(class) by はっちゃん (@hacchan) on CodePen.

便利な「追加CSSクラス」！ワードプレスのブロック（HTML）に簡単にクラスをつける方法

ワードプレスのブロックエディタで、特定のブロックに独自のデザインを追加したいと思ったことはありませんか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます！この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を...

turicco.com

②疑似要素::markerを使う

CSSの疑似要素 ::marker を使うと、リストアイテム（<li>）のマーカー部分（点や番号）の色やサイズを直接変更できます。

ただし、::marker はすべてのブラウザで完全にサポートされているわけではありません。主にモダンブラウザで動作し、古いブラウザでは適用されない場合があります。

::markerの使い方

以下は点の色を赤にする例です。

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

li::marker {
  color: red; /* 点の色を赤色にする */
}

• li::marker
  • リストアイテム（<li>）の「マーカー部分」（点や番号）にスタイルを適用します。
  • color: red;
    • マーカーの色を赤に変更します。別の色を指定したい場合は希望の色名や色コードを指定してください。

主要ブラウザのサポート状況

::markerの疑似要素のブラウザサポート状況は以下の通りです（2024年11月現在）。

最新のブラウザでサポートされていますが、古いバージョンのブラウザでは正常に表示されないことがあります。特にInternet Explorerや古いSafariなどではサポートされていない場合があります。

サポートされるプロパティ

以下のCSSプロパティが::markerでスタイリング可能です。

• color
• font-family
• font-size
• content

背景色（background-color）やボーダー（border）を設定することはできません。点の色やサイズを変更するだけに限定されます。

③li（リストの項目）をspanで囲む

リストアイテムの内容を<span>タグで囲んでスタイルを個別に設定する方法もあります。この方法はリストの各項目に対して細かいカスタマイズをおこないたい場合に便利ですが、HTMLが少し冗長になる点がデメリットです。

See the Pen list-span by はっちゃん (@hacchan) on CodePen.

箇条書きのリストデザイン／点の色を変えるカスタマイズまとめ

以上、箇条書きリストのデザインをカスタマイズする方法を３つご紹介しました。

この記事で紹介した方法は比較的シンプルなCSSやHTMLのカスタマイズなので初心者の方でも試しやすいです。①の::beforeを使ったカスタマイズが最もおすすめですが、必要に応じて他の方法も活用しサイトに合ったデザインを楽しんでください。