【WordPress】リストの先頭にあるドットや番号を消す方法

WordPressのブロックエディターの１つである「リスト」をカスタマイズする方法を解説します。
今回は、リストの先頭にあるドットや番号を消す方法の解説になります。

はじめに

本記事では、特定の記事にあるリストを個々にカスタマイズする方法を説明します。

リストに関連するタグは下記のものがあり、これらのプロパティ値を変更することでカスタマイズを行います。

• リスト：li タグ
• 箇条書きリスト：ul タグ
• 番号付きリスト：ol タグ

以下が、カスタマイズ前のデフォルトのリストです。

• 項目１
  1. 項目１－１
  2. 項目１－２
• 項目２
  1. 項目２－１
  2. 項目２－２

先頭のドットを削除

リストの先頭にあるドットを消す方法になります。

まず、下記のソースコードを「カスタムCSS」に適用します。

.list-del-dot {
  list-style-type: none!important;
}

次に、ドットを消したいリストの「追加CSSクラス」に、下記を入力します。

list-del-dot

こちらが適用した結果になります。
リストの先頭にあるドットが削除されていることが確認出来ました。

• 項目１
  1. 項目１－１
  2. 項目１－２
• 項目２
  1. 項目２－１
  2. 項目２－２

ul {
  list-style-type: none!important;
}

先頭の番号を削除

リストの先頭にある番号を消す方法になります。

まず、下記のソースコードを「カスタムCSS」に適用します。

.list-del-num ol {
  list-style-type: none!important;
}

次に、番号を消したいリストの「追加CSSクラス」に、下記を入力します。

list-del-num

こちらが適用した結果になります。
リストの先頭にある番号が削除されていることが確認出来ました。

• 項目１
  1. 項目１－１
  2. 項目１－２
• 項目２
  1. 項目２－１
  2. 項目２－２

ol {
  list-style-type: none!important;
}

ドットと番号の両方を削除

リストの先頭にある番号を消す方法になります。

まず、下記のソースコードを「カスタムCSS」に適用します。

.list-del-all li {
  list-style-type: none!important;
}

次に、ドットと番号を消したいリストの「追加CSSクラス」に、下記を入力します。

list-del-all

こちらが適用した結果になります。
リストの先頭にあるドットと番号が削除されていることが確認出来ました。

• 項目１
  1. 項目１－１
  2. 項目１－２
• 項目２
  1. 項目２－１
  2. 項目２－２

li {
  list-style-type: none!important;
}