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


この記事はプロモーションを含みます。

CSS

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

はじめに

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

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

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

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

  • 項目1
    1. 項目1-1
    2. 項目1-2
  • 項目2
    1. 項目2-1
    2. 項目2-2

先頭のドットを削除

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

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

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

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

list-del-dot

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

  • 項目1
    1. 項目1-1
    2. 項目1-2
  • 項目2
    1. 項目2-1
    2. 項目2-2

記事内にある全てのリストのドットを消す場合は、以下のソースコードを「カスタムCSS」に記述して下さい。この場合は「追加CSSクラス」への記述は不要です。

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

先頭の番号を削除

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

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

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

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

list-del-num

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

  • 項目1
    1. 項目1-1
    2. 項目1-2
  • 項目2
    1. 項目2-1
    2. 項目2-2

記事内にある全てのリストの番号を消す場合は、以下のソースコードを「カスタムCSS」に記述して下さい。この場合は「追加CSSクラス」への記述は不要です。

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

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

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

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

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

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

list-del-all

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

  • 項目1
    1. 項目1-1
    2. 項目1-2
  • 項目2
    1. 項目2-1
    2. 項目2-2

記事内にある全てのリストのドットと番号を消す場合は、以下のソースコードを「カスタムCSS」に記述して下さい。この場合は「追加CSSクラス」への記述は不要です。

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

コメント

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