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” に変更しました。
参考:
できました
無駄に
無駄に
見出しを
見出しを
つけて
みます
全体
全体をご参考までに。
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;
}