CSSでリスト表示の点を黒丸に変更する方法

デザインの微調整を行い、リスト表示の点を黒丸に変更しました。もともとは赤丸でしたが、デザイン的にしっくりこなかったため、黒丸に変更することにしました。以下のCSSコードを追加することで簡単に反映できます。

変更前と変更後の比較

• 変更前: 赤い丸がリスト項目の先頭に表示されていました。
• 変更後: 黒い丸がリスト項目の先頭に表示されるようになりました。

実際のコード

以下は、リスト項目のスタイルをカスタマイズするためのCSSコードです。このコードを適用することで、リスト表示が黒丸になります。

css.content ul > li:before {
  content: "・";
  transform: scale(3); /* 点を拡大 */
  padding-bottom: 3px; /* 縦位置調整 */
  color: #444; /* 黒色指定 */
}

コードの説明

1. contentプロパティ: リスト項目の先頭に「・」を表示します。
2. transformプロパティ: scale(3)で黒丸を拡大して視認性を向上させます。
3. padding-bottomプロパティ: 黒丸の縦位置を微調整します。
4. colorプロパティ: 黒色（#444）で指定し、落ち着いたデザインに仕上げます。

適用方法

このコードをCSSファイルやテーマ設定内の追加CSSセクションに挿入してください。例えば、WordPressの場合は「外観 > カスタマイズ > 追加CSS」から簡単に設定できます。

注意点

• 互換性: このコードは基本的なCSS構文を使用しているため、ほとんどのブラウザで問題なく動作します。
• カスタマイズ: 色やサイズなどは自由に調整可能です。必要に応じてデザインに合わせて変更してください。

この方法でリスト表示のデザインを改善し、より洗練された見た目を実現できます。ぜひ試してみてください！