CSSLuxeritasのカスタマイズにはまっているhatenaです。今回は見出し(h要素)をカスタマイズでどうせなら連番を付けようといろいろ調べました。シンプルなHTMLで見出しに連番を付加する方法を紹介し、さらに当ブログのLuxeritasに実装したものも紹介します。まとめシンプルなHTMLへの実装例CSSカウンターを使います。詳細は下記のページに解説してあります。カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。postクラスでカウンターを設定して初期化します。h2要素のbefore疑似要素でカウンター値に加算して、それを表示させます。お好みのテキストを付加することも可能です。"章";とすれば「第一章」と表示されます。下のような連番を付加します。h2カウンター値とh3カウンター値を連結してます。h4要素に関しても同様に設定します。マージンで字下げしてます。連番をCSSでデザイン連番を丸の中に白抜きで表示させました。HTMLは一番最初のものです。flex;で連番と見出しを横並びにします。0;これがないと見出しが長くて折り返したときに連番部分の幅が縮んでしまいます。50%;で背景を丸くします。当ブログ(Luxeritasテーマ)に実装したCSS仕様h2見出しに付加する連番は、黒丸背景に白抜き数字(上記のサンプルと同じ)ネガティブマージンで少し左に移動h3見出しに付加する連番は、黒丸背景に白抜きの小文字のローマ数字ネガティブマージンで少し左に移動、h3要素よりは移動は少なくして字下げh4見出しはLuxeritasテーマのデフォルトのまま下の画像のようになります。CSS追加するCSSは下記になります。連番部分をCSSでデザインするサンプルを紹介しました。当ブログに実装したCSSも紹介しました。ご自身のサイトの見出しのカスタマイズをするときにご参考になれば幸いです。...CSSで蛍光マーカーいろいろ、クレヨン風などテキストに蛍光マーカー風の下線を付ける方法はあちこちで紹介されています。...【Luxeritas】関連記事を2列表示にカスタマイズLuxeritasは標準で記事下に関連記事が表示されます。コメントをキャンセルメールアドレスが公開されることはありません。