お買い物マラソン開催中！9/24 01:59まで楽天市場
カスタマイズ
共通カスタマイズ

ワードプレスのリストブロック（箇条書き）／点の色を変える方法３つ（CSS使用）

アイキャッチ／リストデザインカスタマイズ
2022年04月04日
スポンサーリンク

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

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

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

３つの方法をご紹介します。

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

箇条書きリストBefore／After

デフォルトでは自動的に先頭に黒丸がついたごく普通の箇条書きになります。

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

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

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

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

これだけで柔らかくて可愛い感じになりませんか♪

それでは箇条書きの作り方から色を変える方法まで、コピペできるコードを公開します。

この記事では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つめの項目
目次に戻る

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

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

  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>
li{
  color: lightblue;
}

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という擬似要素があります。

この::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）は対応していないよ～

また疑似要素で指定できるプロパティには制限があります。

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

  • font系
  • white-space
  • color
  • content
  • animation・transition系など

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

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

続いて新たに疑似要素を使う方法です。

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

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

  1. デフォルトのリストマーク（・）を非表示にする
  2. CSSで円を作って位置を合わせる

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

CSSで設定すること

  • list-style: none;でリストマークの点を消す
  • li:beforeで項目の先頭に疑似要素を作成する
  • content: ”;で実体化させる
  • widthとheightは点の大きさとなり、同じ数値にして正方形を作る
  • その正方形を、border-radius: 50%;でまん丸にする
  • positionを使って作った円の位置を調整する
positionの使い方
  • 親要素のliにposition: relative;を指定（ここを基準とする）
  • 疑似要素:beforeにposition: absolute;（ここを動かす）
  • left（左からの位置）、top（上からの位置）を適当な場所へ配置する（パソコン、スマホとも位置を確認して合わせる）

点を新しく作るCSSはこちら（ul指定）

それではコードをご覧ください。

こちらのコードは ul（箇条書きを意味するHTMLタグ）を指定するため、サイト内でulタグを使ったすべてのリストに適用されます。

/* リストの点*/
ul {
list-style: none;/*点を消す*/
padding-left:0;/*左の余白*/
line-height:1.8;/*行の高さ*/
}

ul li{ 
position: relative;/*ここを基準に*/
padding-left:20px;
}

ul li:before {
background-color: lightblue;/*色はここで変更*/
position: absolute;/*ここを動かす*/
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:10px;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 50%;
}

/**480px以下**/
@media screen and (max-width: 480px){
ul li{ 
padding-left:20px;
}

ul li:before {
left:0;
top:11px;/*高さの位置調整*/
}
}

サイト内でulタグを使ったすべてのリストに適用されるため、意図しないところでレイアウトが部分的に崩れることがあります。（Cocoonではulタグを使っているアイコンリストにも反映されてしまいます）

次に紹介する、部分的にデザインを適用する方法をお試しください。

部分的にCSSを適用させたいとき（クラス名指定）

部分的にデザインを適用させる場合はクラス名を指定するこちらを使います。

POINT

HTMLの<ul>タグの中にclass=”list-3″といったクラスを指定（””の中のクラス名は任意に決めてOK）,CSSではクラス名に.をつけてセレクタとして記述します。

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

.list-3 li{ 
position: relative;/*ここを基準に*/
padding-left:20px;
}

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

/**480px以下**/
@media screen and (max-width: 480px){
.list-3 li{ 
padding-left:20px;
}

.list-3 li:before {
left:0;
top:11px;/*高さの位置調整*/
}
}

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

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

点を四角にすることも

円の角丸を指定するborder-radiusを０にすることで、四角にすることもできます。

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

<ul class="list-square">
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
/* リストの点*/
.list-square {
list-style: none;
padding-left:0;
line-height:1.8;
}

.list-square li{ 
position: relative;
padding-left:20px;
}

.list-square li:before {
background-color: gray;/*色はここで変更*/
position: absolute;
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:10px;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 0;/*円を四角にする*/
}

/**480px以下**/
@media screen and (max-width: 480px){
.list-square li{ 
padding-left:20px;
}

.list-square li:before {
left:0;
}
}
目次に戻る

まとめ

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

細かいところですが、自分好みの箇条書きが使えるとサイトに個性が出て記事を書く作業も楽しくなるかと思います。

やりやすい方法で試してみてくださいね。

目次に戻る

Comment

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