飽き性の頭の中
Gatsby.jsでヘッダー(見出し)に番号をつけるのサムネイル

Gatsby.jsでヘッダー(見出し)に番号をつける

2023-01-14に公開

技術メモ
# Gatsby.js# CSS

このブログはGatsbyを使って作っている。今までは、見出しに番号をつけていなかったのだが、階層が分かりづらい気がしたので階層をつけてみた。

そのときのメモ。

大まかにやることとしては、

  • 目次(Table of Contents, TOC)に番号をつける
  • 文中の見出しに番号をつける

ということで、それぞれ書いていく。

目次に番号をつける

このブログでは現状、markdownRemark を使っているので、目次は graphql でクエリを引いて取得している。そして、取得した目次の DOM をいい感じに整形して表示している。

参考例:Gatsby の記事に目次を作成してみる | flabaka.com

そのため、Gatsby の機能・カスタマイズではなく、単にこの DOM に対して適切な CSS を当てることで番号をつけた。

次の記事を参考にした。

Gatsby ブログサイト移行物語 - プラグインを利用して目次出力 > ol 要素の入れ子で親の番号を引き継いでのナンバリング方法 | AIZACK.NET

まずは、TOC は ul(unordered list)で記述されているので、強引に ol に変換する。

TOC.tsx
<TOC
  dangerouslySetInnerHTML={{
    __html: tableOfContents.replace(/(ul>)/gi, "ol>"),
  }}
/>

次に、ol に番号をつけるスタイルを当てる。

TOC.tsx
ol {
  list-style: none;
  counter-reset: counter;
}
ol li::before {
  content: counters(counter, ".") ". ";
  counter-increment: counter;
}
ol li ol {
  list-style: none;
  counter-reset: counter;
}

そうすると、画像のように、番号のあとに改行が入ってしまう。

2023 01 15 01 45 42

p タグの代わりに span タグを使うように修正した。

TOC.tsx
<TOC dangerouslySetInnerHTML={{
    __html: tableOfContents.replace(/(ul>)/gi, "ol>").replace(/(p>)/gi, "span>" // ← 追加,
}}/>

するとこんな感じに表示された。

2023 01 15 01 47 00

おまけ

ちなみに、目次の表示にgatsby-remark-autolink-headersを使っている場合は、オプションを設定するだけで番号をつけることができるようである。

しかし、各 md に、

hogehoge.md
```toc
```

と記述する必要があるようなので、それがめんどくさく上のようなやり方にしている。

文中の見出しに番号をつける

これも Gatsby のプラグインで対応できるものではなさそうだったので、同様に CSS を当てている。

参考:CSS で見出しに連番を付ける-Luxeritas に適用 | hatena chips

そして、このようになった。

TOC.tsx
h1:before {
  content: counter(h1) ".";
}

h2 {
  counter-increment: h2;
  counter-reset: h3;
}
.post-body h2:before {
  content: counter(h1) "." counter(h2) ".";
}

h3 {
  counter-increment: h3;
}
.post-body h3:before {
  content: counter(h1) "." counter(h2) "." counter(h3) ".";
}

とりあえず、h3 までは番号が振られるようにした。4層目以降はほとんど使わないし、その場合は番号なしでもいいだろうということでこうしている。

このページを見ても——その後デザイン変更していなければ——分かると思うが、次の画像のように見出しが設定される。

2023 01 15 01 56 14

まとめ

Gatsby がどうこうというよりは、普通に CSS で対応することになった。

Profile picture

たわ / tawachan

1994年生まれ(28歳)

大学院修士課程(政治学)(2021-)

Web開発(React / TypeScript / Node / Ruby / Ruby on Rails)

関連記事

タグ一覧

# 福岡:39# 東京:20# 大学院:12# 移住:10# エナジードリンク:9# Google:8# ブロックチェーン:8# Webエンジニア:7# Mac:6# Sony:6# サントリー:6# Apple:5# Googleフォト:5# インドネシア:5# 埼玉:5# 英語:5# AWS:4# Canon:4# EOS 8000D:4# Kindle:4# ZONe:4# ラーメン:4# 京都:4# 仮想通貨:4# 鴨川シーワールド:4# Docker:3# EOS8000D:3# Lightroom:3# Markdown:3# Pixel:3# React Native:3# iPad:3# iPad mini:3# アマルティア・セン:3# アメリカ:3# セブンイレブン:3# レッドブル:3# 卒業旅行:3# 寿司:3# 社会人:3# 紅葉:3# 長崎:3# API:2# ECR:2# ERC20:2# Expo.io:2# Firebase:2# Gatsby.js:2# Google Drive:2# Kindle Oasis:2# Kindle Paperwhite:2# LINE:2# MacBook Pro:2# NestJS:2# Next.js:2# Notion:2# Oculus:2# Oculus Quest:2# Pixel Buds:2# React:2# Zotero:2# a7iii:2# iPhone:2# pandoc:2# re:Invent:2# zsh:2# かき小屋:2# カフェ:2# ギグワーカー:2# コワーキングスペース:2# サーチコンソール:2# ジャカルタ:2# スターバックス:2# ステーキ:2# スマートウォッチ:2# ソラマチ:2# チョコレート:2# ニューヨーク:2# バリ島:2# パンとエスプレッソと:2# ヒュッゲ:2# ビーチ:2# ブックスタンド:2# マクドナルド:2# ミズマチ:2# モンスターエナジー:2# ワイヤレスイヤホン:2# 三千院:2# 両国:2# 修士論文:2# 兵庫:2# 千葉:2# 博多:2# 堀江貴文:2# 宮崎:2# 嵐山:2# 川越:2# 広島:2# 新宿御苑:2# 日米学生会議:2# 有馬温泉:2# 東寺:2# 東浩紀:2# 歴史:2# 民主主義:2# 江ノ島:2# 清澄白河:2# 独自ドメイン:2# 神奈川:2# 神戸:2# 転職:2

©2023 tawachan All Rights Reserved.