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

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

デザインに合わせて箇条書きをもっと視覚的にアピールすることで、訪問者にとって読みやすく魅力的なページにすることができます。

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

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

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

この記事を書いた人

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

はっちゃん
です

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

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

CSSの記述について

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

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

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

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

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

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

ひとつずつ紹介します。

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

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

箇条書きを作ってクラスを入れるだけ。

CSSの設定

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

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

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

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

/* スマホ表示の調整 */
@media screen and (max-width: 480px) {
    .ullist > li:before {
        top: 11px; /* モバイルでも同じ高さに調整 */
    }
}

このCSSコードは、リストに「ピンクの点」を追加して見た目を整えるためのものです。以下で各部分を簡単に説明します。

• .ullist
  • list-style: none;デフォルトのリストの点（ディスク）を非表示にします。
  • line-height:1.8;リスト項目の行間を広くして、ゆったり見やすくします。

• .ullist > li
  • position: relative;点（::before）の位置調整の基準に設定します。

• .ullist > li:before
  • リストの左側に小さな丸を表示するためのスタイルです。
    • background-color: pink;点の色をピンクに指定。ここを変更すれば他の色にも対応できます。
    • position: absolute;：位置を自由に調整できるようにします。
    • content: '';：中身を空にしてデザインだけを適用。
    • width: 7px; height: 7px;：点の大きさを7ピクセルに設定。
    • top: 11px;：点の垂直位置をリスト項目内で少し下に調整。
    • left: -1em;：点をリスト項目の左側に少し寄せます。
    • border-radius: 50%;：点を丸くする指定です。

• @media screen and (max-width: 480px)
  • スマホのように画面幅が480px以下の場合のスタイルです。
  • .ullist > li:before の top: 11px; が再指定されていますが、特に変わらずそのまま同じ高さで表示されます。

箇条書きにクラスを追加する

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

1. 点の色を変えたい箇条書きの親ブロックを選択（ul要素）
2. 右側サイドメニュー：高度な設定 → 追加CSSクラス にクラス名（ullist）を入力する

これだけでOK！！

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

HTMLの<ul>タグにclass="ullist"が追加され、箇条書きのCSSが反映されています。

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

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

この記事では、ブロックにカスタムクラスを追加する方法をご紹介します。 ブロックエディタの「追加CSSクラス」を使うことでとても簡単！ 特定のブロックだけに、オリジナルのスタイルを追加できます。カスタマイズする際にとても重宝する方法なのでぜひ...

turicco.com

②疑似要素::markerを使う

次に、CSSの疑似要素::markerを使って、リストアイテムのマーカー部分（リストの点や番号）をカスタマイズする方法を紹介します。::markerは、リストの点や番号をスタイリングするために使用される疑似要素で、リストアイテム（<li>）のマーカー部分の色やサイズを直接変更することができます。

ただし、::markerにはブラウザサポートに限りがあるため使用する際には注意が必要です。現在、主にモダンブラウザでサポートされており、古いブラウザでは適用されないことがあります。

::markerの使い方

::markerを使うことでリスト項目の「マーカー部分」の色やサイズを簡単に変更できます。以下は点の色を赤にし、少し大きくするCSSの例です。

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

li::marker {
  color: red; /* 点の色を赤色にする */
  font-size: 1.3rem; /* 点を少し大きく*/
}

• li::marker
  • このセレクタを使うことで、リスト項目（<li>）のマーカー部分（点や番号）のスタイルを変更できます。
• color: red;
  • リストの点や番号の色を赤に変更します。ここを変更することで好みの色にカスタマイズできます。
• font-size: 1.3rem;
  • 点や番号のサイズを少し大きくします。rem単位で指定することでフォントサイズを柔軟に調整できます。

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

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

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

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

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

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

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

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

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

実装方法

リスト項目を<span>で囲むことでリスト全体や個別の項目に異なるスタイルを適用できます。以下は<span>タグでリスト項目を囲み、リストの色とテキストの色を変更する例です。

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

ul li {
  color: pink; /* リスト全体の文字色をピンクに設定 */
}

ul li span {
  color: black; /* <span>タグ内の文字色を黒に設定 */
}

• <ul> と <li>セレクタで、リストアイテムの基本的な文字色（この場合はピンク）を指定します。このスタイルはリスト全体に適用されます。
• <span>タグで囲まれた部分に対して異なるスタイル（この場合は黒色）を適用します。これによりリスト全体のスタイルを上書きして個別に色を変更することができます。

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

<span>を使ったリスト項目のスタイル変更は、特定のテキストに対して個別のカスタマイズを施したい場合に有効です。しかし、頻繁に使う箇条書きリストで毎回<span>タグを使うのは手間がかかるため、少し複雑なデザインが求められる場合に使うのが理想的です。

HTML／箇条書きリストの作り方

箇条書きを作成するためには、HTMLの<ul>（アンオーダードリスト）タグと<li>（リスト項目）タグを使用します。

Cocoonなど、テーマによってはブロック機能でリストを作るだけで自動的にHTMLが作成されます。

箇条書きに使うタグについて

HTMLではul、ol、liの3つのタグを使って箇条書き（リスト）を作ることができます。

基本的にul&liのセット、またはol&liのセットで使います。

タグの書き方の例

箇条書きリスト／番号なし

• 前後を<ul></ul>ではさむ
• ひとつひとつの箇条書きの項目は<li></li>ではさむ（liタグは何個でも使えます）

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

箇条書きリスト／番号あり

また、<ol>タグを使用すると番号付きのリストになります。

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

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

最適な方法を選び、ワードプレスの箇条書きを魅力的にデザインしましょう！

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

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