Changing the appearance ブログの見た目を変える

The way to change the appearance is edit the CSS under styles/ directory.
ブログの見た目を変えるには styles/ ディレクトリ以下にある CSS ファイルを編集します。

As an example, let's change the font size of the post's title in the post index page.
例として、ここでは記事一覧ページの記事タイトルのフォントサイズを変更してみましょう。

Open styles/blog-parts.module.css in your editor and find .postTitle a section.
エディタで styles/blog-parts.module.css を開き .postTitle a セクションを探します。

.postTitle a {
  font-size: 1.2rem;
  color: inherit;
}

Change 1.2rem to 2.4rem of font-size.
font-size で 1.2rem となっているのを 2.4rem に変更します。

.postTitle a {
  font-size: 2.4rem;
  color: inherit;
}

After then, save the file and start the local server.
ファイルを保存し、ローカルサーバーを起動します。

yarn dev

Open http://localhost:3000/blog in the browser.
ブラウザで http://localhost:3000/blog を開きます。

You can see the bigger title than previous.
前よりタイトルが大きくなっているのがわかるはずです。

Try changing the CSS and enjoy the customize. 😉
CSS をいろいろ変えてみてカスタマイズを楽しんでください。 😉

For more information さらに詳しい情報

If you want to know about the page layouts, read Page layouts in this wiki.
ページレイアウトについて知りたかったら、wiki 内の ページレイアウト を参照してください。

styles/blog-parts.module.css that we edited at this time relates to components/blog-parts.tsx.
今回編集した styles/blog-parts.module.css は components/blog-parts.tsx に関連しています。

Both CSS files and component files have same filename, so you can learn where links to somewhere.
CSS ファイルとコンポーネントファイルは同じ名前になっているので、コードを読んでどこがどこに対応しているか学習してみてください。