リストスタイル(数字)でデフォルトでは初期値変更が正常なのですが「数字-丸」「数字-四角」にすると、
例 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; /* カウンターの値を表示 */
}