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

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

2023-01-14に公開

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

そのときのメモ。

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

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

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

目次に番号をつける

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

参考例:

https://flabaka.com/table-of-contents/
https://flabaka.com/table-of-contents/

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

次の記事を参考にした。

まずは、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 を当てている。

参考:

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

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 で対応することになった。

関連記事

タグ

#福岡:39

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#React:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent: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

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

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

Web開発(2017-)

©2024 tawachan All Rights Reserved.