サポート » 使い方全般 » 2段目のlistを括弧付きの数字にするCSS

2段目のlistを括弧付きの数字にするCSS

  • 解決済 ueokak

    (@ueokak)


    4年、 6ヶ月前

    CSSの初心者です。

    Gutenbergのブロックを使ってサイト構築しているのですが、リストが多いコンテンツで、2段目は括弧付きの数字にしたいのですが、固定ページの追加CSSクラスにどのような記述を書き込めばいいでしょうか。

    【例】

    １．運動会について
    　　（１）開会の言葉　　　←※ この2段目を括弧付きの数字にしたいです。
    　　（２）校長先生の挨拶

    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • DRILL LANCER

    (@rickaddison7634)

    4年、 6ヶ月前

    Gutenbergのリストブロックを使用しているのですね。
    下記CSSを「外観 > カスタマイズ > 追加CSS」か子テーマのCSSに追加すればOKだと思います。

    ol>li>ol>li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol>li>ol>li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}
    トピック投稿者 ueokak

    (@ueokak)

    4年、 6ヶ月前

    うお！
    CSSに追加しましたらすぐに括弧付きの数字リストになりました！
    CSSを学ぶ必要ありますね。。
    子テーマも作ってない状況です。
    ありがとうございました。

    • この返信は4年、 6ヶ月前にueokakが編集しました。
    DRILL LANCER

    (@rickaddison7634)

    4年、 6ヶ月前

    参考にしたサイトを掲載しておきます。
    ３段目以降を変えたくなった時に参考になると思います。
    （ol>li>の数が１つ増えると３段目に対応します）
    https://webnetamemo.com/coding/css/201507161181
    https://cultureacademia.jp/webcreate/292/

    トピック投稿者 ueokak

    (@ueokak)

    4年、 5ヶ月前

    なるほど、ありがとうございます！

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「2段目のlistを括弧付きの数字にするCSS」には新たに返信することはできません。

表示