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

  • 解決済 ueokak

    (@ueokak)


    CSSの初心者です。

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

    【例】

    1.運動会について
      (1)開会の言葉   ←※ この2段目を括弧付きの数字にしたいです。
      (2)校長先生の挨拶

    よろしくお願いします。

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

    (@rickaddison7634)

    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)

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

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

    (@rickaddison7634)

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

    トピック投稿者 ueokak

    (@ueokak)

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

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