Kobito の CSS で見出しに通番を振る

Kobito では、プレビューに適用する CSS を指定することができます。これを用いれば見出しに通番というか連番を入れるのは容易なのですが、いかんせん一行目の「タイトル」と「#」一つの「見出し」がどちらも「H1」要素なので、何も考えずに適用すると、タイトルにまで番号が振られてしまい、不格好です。

答え

「最初の H1 以外」を指定すれば OK です。

h1:not(:first-of-type) {
    counter-increment: chapter;
    counter-reset: section;
    clear: right;
}

h1:not(:first-of-type):before {
    content: counter(chapter) " ";
}

2016/06/18 追記: 当初は “first-child” 擬似クラスで判別をしていたのですが、数式を処理するために Kobito 2.3.6 で導入された MatJax がロードされると、body の最初の要素として hidden な自前の div エレメントを挿入するため “first-child” が効かなくなってしまったので、“first-of-type” に変更しました。

参考:

• Adding MathJax increases first element's top margin (Github themes) · Issue #305 · MacDownApp/macdown
• :first-of-type - CSS | MDN

できました

無駄に

無駄に

見出しを

見出しを

つけて

みます

全体

全体をご参考までに。

body {
    counter-reset: chapter 0;
}

h1:not(:first-of-type) {
    counter-increment: chapter;
    counter-reset: section;
    clear: right;
}

h1:not(:first-of-type):before {
    content: "▌" counter(chapter) " ";
    color: darkred;
}

h2 {
    counter-increment: section;
    counter-reset: subsection;
    clear: right;
}

h2:before {
    content: "▌" counter(chapter) "." counter(section) " ";
    color: darkorange;
}

h3 {
    counter-increment: subsection;
    clear: right;
}

h3:before {
    content: "▌" counter(chapter) "." counter(section) "." counter(subsection) " ";
    color: #d9b9a9;
}