[ 解決済 ] リストスタイル(数字)ブロックの初期値が反映されない

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] リストスタイル(数字)ブロックの初期値が反映されない

[ 解決済 ] リストスタイル(数字)ブロックの初期値が反映されない

  • このトピックには2件の返信、2人の参加者があり、最後にWEB001により1週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #104109

    WEB001
    参加者

    ■ WordPress のバージョン
    6.7.1

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.28.2

    ■ Pro Unit のバージョン
    9.100.6.1

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    リストスタイル(数字)の初期値変更が反映されるようにしたい
    *通常、先頭が「1」から始まるのを「3」にしたいときなど。

    リストスタイル(数字)でデフォルトでは初期値変更が正常なのですが「数字-丸」「数字-四角」にすると、
    例 

      が効かなくなります。「順序を逆」の設定も効かないようなので確認していただけますでしょうか。
      よろしくお願いします。

      ■ 自分で試した事
      リストスタイル(数字)でデフォルトでは初期値変更が正常になります。

      ■ 症状が発生するブラウザ
      chrome

      ■ 実際の症状
      リストスタイル(数字)でデフォルトでは初期値変更が正常なのですが「数字-丸」「数字-四角」にすると、
      例 

      が効かなくなります。「順序を逆」の設定も効かない。

    #104114

    うなこ
    モデレーター

    リストスタイル(数字)でデフォルトでは初期値変更が正常なのですが「数字-丸」「数字-四角」にすると、
    例 ol start='3'
    が効かなくなります。「順序を逆」の設定も効かないようなので確認していただけますでしょうか。
    よろしくお願いします。

    お世話になっております。
    数字付きの「順序付きリスト」(olタグ)について、デフォルトスタイルの場合はブラウザの標準機能で数字が表示されているため、「初期値を変更する」 (start=”3″) や「順序を逆にする」 (reversed) の機能が利用できます。

    しかし、スタイル「数字-丸」「数字-四角」を選択すると、数字がCSSの counter 関数で生成されるため、これらの標準機能は動作しません。

    現在、この仕様について注意書きがなく、わかりづらい点について申し訳ありません。

    —–
    CSSでカスタマイズする方法

    【初期値を「3」から始めたい場合】
    以下のCSSを「リストブロック」の「カスタムCSS」に追加してください。
    「2」の部分は、希望する開始番号より1少ない値に変更してください。

    selector{
    counter-reset: number 2 !important; /* カウンターの開始番号を3に設定 */
    }

    【順序を逆にしたい場合(例: リスト項目が6つの場合)】

    リスト項目数が6つの場合の例です。以下のCSSを「リストブロック」の「カスタムCSS」に追加してください。
    リスト項目の数が変動する場合は、counter-reset の値を調整してください。

    selector {
    counter-reset: reversed-counter 7 !important; /* カウンターを初期化 (例: 最大値を7とする) */
    }
    
    selector li {
    counter-increment: reversed-counter -1 !important; /* カウンターを減少させる */
    }
    
    selector li:before {
    content: counter(reversed-counter) !important; /* カウンターの値を表示 */
    }
    #104116

    WEB001
    参加者

    早々に教えて頂きありがとうございます。
    感謝申し上げます。
    ご提示いただいたCSSで解決できました!

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。