Gatsbyのカスタマイズ - React-Bootstrap の適用と調整

2021-11-05Gatsby website Bootstrap

序

現状では Gatsby Starter Blog ほぼそのままの状態で、モバイルファーストで大変シンプルなのは良いが、如何せん機能が最低限すぎる。これからナビゲーションメニューをつけたりして、閲覧性を高めていきたい。しかし CSS を書くのは大変なので、CSS フレームワークを利用して、見通しよくスピーディーにカスタマイズ出来るように基盤を整えたい。

CSS フレームワークの選定

当初は、使い方が簡単そうで、しかも人気がある、Material-UI を利用しようと考えていた。ところが調べてみると、Gatsby に適用する際にプラグインが必要で、その プラグインが Gatsby v4 に未対応 だと言うことが分かった。変化の速いウェブの世界で対応が遅いのは問題なので、Material-UI は残念ながら却下となった。

Tailwind CSS も魅力的だが、デザイナーではない自分にはオーバースペックな気がする。ということで基本に立ち返って、超王道 React-Bootstrap を採用する事にした！

React-Bootstrap の適用

React-Bootstrap インストールと初期設定は、公式で説明されている通り非常に簡単。パッケージをインストールして、

$ npm install react-bootstrap bootstrap

gatsby-browser.js に Bootstrap を追加すればよい。

// Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

Gatsby Starter Blog では、src/style.css の一箇所に全てのスタイルが集約されている。React-Bootstrap に移行を進めるにあたり見通しを良くしたいので、既存のスタイルを出来る限りコンポーネント単位の CSS モジュールに変更する。

global-header クラス → /components/layout.module.css
main-heading クラス → /components/layout.module.css
header-link-home クラス → /components/layout.module.css
post-list-item クラス → /components/PostSummary.module.css
bio クラス → /components/bio.module.css
blog-post クラス → src/templates/blog-post.module.css

準備が整ったので、2 段階に分けて Bootstrap を適用していく。

段階 1: CSS プロパティ → Bootstrap の ユーティリティクラス へ変更
- margin-bottom: var(--spacing-4); → className="mb-3"
- text-decoration: none; → className="text-decoration-none"
段階 2: CSS カスタムプロパティ（変数）→ Bootstrap の変数へ変更
- var(--color-primary) → var(--bs-primary

地道にこの作業を続けて、src/style.css と個々の CSS モジュールを出来る限り空にする。これで Bootstrap の枠にはまった！

スタイルの調整

フォントサイズと行間

Bootstrap のデフォルトのフォントサイズは 16px、行間は 1.5 なのだが、何となく文字が詰まっている気がする？

調べてみたら（下記のリンク参照）、日本語の場合は 行間を 1.8 くらい にした方が見やすいらしい。そこで src/style.css で行間の調整する。

body {
  line-height: 1.8;
}

少し読みやすくなった？

マークダウン記事のスタイリング

再び先人のお知恵（下記参照）を有り難く拝借して、マークダウン記事の見出しや表などのスタイルを調整する。

src/templates/blog-posts.module.css

/* Heading */
.blog-post h2 {
  padding: 1rem 2rem;
  border-left: 5px solid #000;
  background: var(--bs-light);
}

.blog-post h3 {
  padding: 0.5rem 0rem;
  border-bottom: 3px solid #000;
}

/* Table */
.blog-post table thead tr th {
  border-bottom: 1px solid var(--bs-gray-dark);
}

.blog-post table tbody tr td {
  border-bottom: 1px solid var(--bs-gray-500);
}

タグ表示

タグ表示が味気ないので、もうちょっと改良する。

React-Bootstrap の Badges コンポーネントを利用する。src/components/TagLine.js の該当箇所を次のように変更する。

<Link to={`/tags/${kebabCase(tag)}/`} key={id} className="ms-1">
  <Badge bg="primary">{tag}</Badge>
</Link>