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

この記事では、CSSを使って箇条書きの「点」の色を変更する方法を紹介します。

箇条書きリストを使う際、デフォルトの黒い点から好みの色に変更したいことがあるかもしれません。デザインに合わせて箇条書きをもっと視覚的にアピールすることで、訪問者にとって読みやすく魅力的なページにすることができます。

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

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

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

この記事を書いた人

• ブログ好きな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を子テーマのスタイルシートにコピーします。

/* リストの点*/
.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%;/*点の丸み*/
}

/**480px以下**/
@media screen and (max-width: 480px){
	.ullist > li:before {
		top:11px;/*高さの位置調整*/
	}
}

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

• .ullist
  • list-style: none;：リストの「デフォルトの点」を消して、このデザインを適用させます。
  • line-height:1.8;：リスト項目の行間を広くして、ゆったり見やすくします。

• .ullist > li
  • position: relative;：リスト項目 (<li>) を位置の基準にします。これにより、後で追加する「点」の位置を調整できます。

• .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; が再指定されていますが、特に変わらずそのまま同じ高さで表示されます。

※行の高さ（line-height:1.8;）を変更すると点の位置がずれてしまうので、top（上からの位置）の値をパソコン表示、モバイル表示ともに調整してください。

• ←新しく作成した丸ポチをこのようにしてリストマークっぽく見せています！

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

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

＼「追加CSSクラス」の簡単使い方／

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

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

turicco.com

1. 箇条書きを作成する
2. 点の色を変えたい箇条書きの親ブロックを選択（ul要素）
3. 右側サイドメニュー：高度な設定 → 追加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.

②疑似要素::markerを使う

次に、疑似要素::markerを使う方法。

箇条書きリストに使われるli要素のCSSをデベロッパーツール（Google Chromeに標準で搭載されている機能で、要素のHTMLやCSSの構成を見ることができる）で見てみると::markerという擬似要素があります。

::markerという擬似要素が黒丸（・）の正体。

CSSの::marker疑似要素を使用することで、リストの点（マーカー）の色を直接変更できますが、ブラウザサポートが限られている場合があるため注意が必要です。

例）点の色を赤にしたいときのCSS

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

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

このCSSコードは、リスト項目の「マーカー」（通常、点や数字で表示されるリストマーカー）に対してデザインを変更するためのものです。li::marker疑似要素を使って、リスト項目の「点」部分をカスタマイズしています。

• li::marker
  • color: red;：リストの点や番号の色を赤に変更します。
  • font-size: 1.3rem;：点や番号のサイズを通常より少し大きく（1.3倍の大きさに）します。

::markerで使えるプロパティの例

• font系
• white-space
• color
• content（Safari未対応）
• animation・transition系など

疑似要素::markerで指定できるのは一部のプロパティのみで、特にSafariでは未対応のプロパティが多いようです。記述はとても簡単ですが、対応ブラウザが限られてしまうのがデメリット。

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

各リスト項目をspanタグで囲み、色を設定する方法です。複雑な構造や追加のHTMLが必要な場合に役立ちますが、HTMLが少し冗長になることもあります。

1. HTMLで <li>の内容を<span></span>タグで囲む
2. CSSで<li>要素に黒丸につけたい色を指定する。（すべてがこの色になります）
3. <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;
}

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

この方法のデメリットは手間がかかること。頻繁に使う箇条書きでli項目を毎回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を使ったカスタマイズが最もおすすめですが、必要に応じて他の方法も活用しサイトに合ったデザインを楽しんでください。

お好みの方法で試してみてくださいね。