当ブログを紹介いただいたサイトを掲載します受付中

ワードプレスのリストデザイン（箇条書き）点の色を変える方法

アイキャッチ／リストデザイン カスタマイズ
2022年04月04日
カスタマイズ
テーマ共通
記事内に広告が含まれています
スポンサーリンク

記事を書くときに使われる箇条書きのリスト。

要点を見やすく、伝えやすくするためにどんなサイトでも使われていますね。

今回はリストのデザインを少し変えてみるカスタマイズについて。

具体的には先頭に付く点の色を変えてみます！

当記事では３つの方法をすべてご紹介します。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

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

ワードプレスで箇条書きを作ると、デフォルトでは先頭に黒丸がついたごく普通のリストが表示されます。

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

シンプルで何も問題はありませんが、もう少し印象に残るように遊び心で可愛くしていきます。

最初の黒丸・の部分を少しだけ大きくして色をつけると…こんな感じに。

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

点の色をピンクにしてみました！これだけで可愛い感じになりませんか♪

それでは箇条書きの作り方から色を変える方法まで解説していきますね。

この記事ではCSSを使用します。編集には子テーマを使用しましょう。
（ワードプレスの場合：ダッシュボードの外観 → テーマファイルエディタ → スタイルシート (style.css)）

スポンサーリンク
目次に戻る

HTML／箇条書きの作り方

まずはHTMLでul、olタグなどを使って箇条書きリストを作成します。

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

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

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

  • ul：Unordered Listの略（順序のない箇条書き）
  • ol：Oredered Listの略（順序ありの箇条書き）
  • li : list itemの略（リストの項目を表示するために使用するタグ）

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

タグの書き方の例

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

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

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
ブラウザではこのように表示されます
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

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

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

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>
ブラウザではこのように表示されます
  1. 1つめの項目
  2. 2つめの項目
  3. 3つめの項目
スポンサーリンク
目次に戻る

箇条書きの点の色を変える３つの方法

番号なしリストの先頭につく黒丸（・）をカスタマイズする場合は３つの方法があります。

基本的に③の擬似要素 ::beforeを使う方法だけ覚えておけばいいので、すぐに知りたい方は読み飛ばしてくださいね。

クリックでリンクします
  1. 項目のliをspanで囲んで色を変える
  2. 擬似要素 ::markerを使う
  3. 擬似要素 ::beforeを使う 推奨!!

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

まずは単純に項目をspanで囲む方法について。

span単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化できます。改行されず、文章の一部分を装飾するときによく使われます。

  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で囲むのは手間がかかりますね…

他にいい方法がないかな？？

②デフォルトの疑似要素::markerを使う

①は単純にspanで囲んだ部分の色を変更するだけでしたが、②～③は疑似要素を使う方法。

疑似要素？と言っても分かりずらいので特徴を書いてみます。

::marker
  • liタグにデフォルトで付いていてリストの点や数字を作っている
  • CSSの記述は少なくて済む
  • 使えるプロパティが限られている
  • 対応ブラウザが限られる
  • 柔軟なカスタマイズには向かない
::before
  • デフォルトの点をlist-style: none;で消して新たに要素を追加する
  • 記述するCSSは多くなる
  • 使えるプロパティ、ブラウザに制限はなし
  • 柔軟なカスタマイズができる

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

また、li 要素のdisplayプロパティの値はlist-itemです。（display: list-item）

デフォルトでは ul 要素のlist-style-typeはdiscになっていて、リスト項目（li 要素）の先頭には黒丸のマーカーが表示されます。

つまり、この::markerという擬似要素が黒丸（・）の正体！！

この疑似要素::markerにカスタマイズしたい項目（プロパティ）を記述するだけ。

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

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
li::marker {
	color: red;/*点を赤色にする*/
	font-size:1.3rem;/*点を少し大きく*/
}
ブラウザではこのように表示されます
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

記述はとても簡単です♪

ただし対応ブラウザが限られてしまうのが難点。

Chromeでは動作するけど、私のスマホ（android）は対応していないよ～

疑似要素で指定できるのは一部のプロパティのみで、特にSafariでは未対応のプロパティが多いようです。（2023年11月現在）

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

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

これらのデメリットを考えると次に書く方法が確実に使いやすいと言えます。

③新たに疑似要素::beforeを作成する 推奨

続いて新たに疑似要素（点）を追加する方法。

ブラウザ、プロパティの制限がなく柔軟なカスタマイズができるので、この方法をマスターすればいろいろな応用ができて便利です。

簡単にイメージするとこんな感じです。

  1. デフォルトのリストマーク（・）を非表示にする
  2. CSSで円（○）を作って位置を合わせる
  3. クラス名を入力すると反映する

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

CSSで設定すること

具体的な手順として、次のようなプロパティを書いていきます。

  • list-style: none;でリストマークの点を消す
  • li::beforeで項目の先頭に疑似要素を作成する
  • content: '';で実体化させる
  • widthとheightは点の大きさとなり、同じ数値にして正方形を作る
  • その正方形を、border-radius: 50%;でまん丸にする
  • positionを使って作った円の位置を調整する

CSS（クラス名指定）

クラス名を指定することで、サイト内の箇条書きすべてではなくクラスをつけた部分だけにデザインを適用します。

反映するとこのように表示されます

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

ここでは「ul-list」にしていますがクラス名は任意につけられますよ。（半角英数字、半角ハイフンとアンダーバー）

<ul class="ul-list">
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
/* リストの点*/
.ul-list {
	list-style: none!important;
  line-height:1.8;/*行の高さ*/
}

.ul-list > li{ 
	position: relative;/*ここを基準に*/
}

.ul-list > li:before {
	background-color: pink;/*色はここで変更*/
	position: absolute;/*ここを動かす*/
	content: '';
	width: 7px;/*円の幅*/
	height: 7px;/*円の高さ*/
	line-height:7px;
	top:11px;/*高さの位置調整*/
	left: -1em;/*左側位置調整*/
	border-radius: 50%;
}

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

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

箇条書きリストの使い方／ブロックエディタの「追加CSSクラス」に入力するだけ

使い方は簡単。

＼「追加CSSクラス」の簡単使い方／
ワードプレスのブロック（HTML）に簡単にクラスをつける「追加CSSクラス」の使い方
こんな方におすすめの記事です カスタマイズ初心者 ワードプレスのブロックエディタを使っている ブロックに簡単にクラス名をつける方法を知りたい ブロックエディタユーザーでカスタマイズをされる方、どのようにブロック（HTML）にクラスを追加して...
turicco.com
  1. 箇条書きを作成する
  2. 点の色を変えたい箇条書きの親ブロックを選択（ul要素）
  3. 右側サイドメニュー：高度な設定 → 追加CSSクラス にクラス名を入力する

この際、選択するのは子要素（li）ではなく箇条書きの親要素ブロック（ul）です。子要素（li）になっている場合は、ツールバーの・・・（縦のドットアイコン）から「親ブロックを選択（リスト）」をクリックして切り替えてください。

これだけでOK！！

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

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

スポンサーリンク
目次に戻る

まとめ

箇条書きの点を装飾する方法を３つご紹介しました。

  1. 項目のliをspanで囲んで色を変える
  2. 擬似要素 ::markerを使う
  3. 擬似要素 ::beforeを使う 推奨!!

①②はこんな方法もあるよ～という感じで、③だけ使えれば不自由ないかと思います。

細かいところですが、サイトに個性が出て記事を書く作業も楽しくなりますよ。

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

目次に戻る

Comment

タイトルとURLをコピーしました