gatsby-starter-blog でこのブログを作っているが見た目をカスタマイズしたくなったのでやってみた。
デザイナーとかフロントエンドの人ではないのでむずかしかったがなんとかこれでいいかなと思えるところまでできた。
カスタマイズといっても以前使っていたスターターのデザインをすごく参考にした（そのまま使わせてもらっているところもあります）ので自分で考えた箇所はデザインに関してはあんまりない。
before アンド after
こっちが before で
こちらが after (2022年5月5日時点) 。
参考にしたもの
全体の配色
背景などの色は以前使っていたスターター gatsby-blog-mdx のものをそのまま使わせてもらっている。
自分はデザインができないのでめちゃありがたい。
https://github.com/EllisMin/gatsby-blog-mdx
ヘッダのグラデーション
ヘッダのグラデーションは uiGradients というサイトのものを使わせてもらっている。
こちらはぱっと選んだので、おいおい変更する予定。
https://uigradients.com/#MegaTron
フォント
フォントは Oxanium と M PLUS 2 。
Oxanium は gatsby-blog-mdx で使用されていたフォントがテイストに合っていたのでそのまま採用。
M PLUS 2 は、 M PLUS 1 を使っていたことがあり気に入っていたので探してみたら 2 があって、なんとなく 2 にしてみた。
バナナ
バナナのアイコンは自分で書いたもの。
その他
スタイルの変更ではないがタグを表示させるようにしていたり excerpt の表示を frontmatter のものを使うようにしていたり（こちらはもともと gatsby-blog-starter に実装されていたのでそれを使うようにしただけ）という変更をした。
また、 before アンド after にはないが、一覧だけでなく記事ページもちょこっと変更している。
ちょっと心配しているのは、いまは数が少ないが記事数が増えてくるとトップページってとんでもなく長くならんのか？ということ。なるやろって感じですが。
これに関しては今後調べて対応してみよう。
まとめ
以前使っていたスターターがお気に入りすぎてそのまま使いたかったのだが古いせいか動かなかったので諦めて作り直したが、雰囲気が近いものになったのでよかった。
（ほぼパクっているのでそらそうやろって感じですが。。）
はやく公開したい・・・。（現時点で未公開）