Next.jsを使って静的なブログサイトを作成する(3)

2024-07-21

はじめに

Next.jsのBlog Starter Kitを使ったサイト作成の第3弾。Tailwind CSSを利用したスタイルの変更方法です。

背景色を変更するには

src/app/page.tsxとsrc/app/posts/[slug]/page.tsxをエディタで開いて<main>のところにTailwind CSSで記載します。

<main className={"bg-slate-100"}>

記事中の見出しのスタイルを変更するには

src/app/_components/markdown-styles.module.cssをエディタで開いてTailwind CSSで記載します。

<修正前>

.markdown h2 {
  @apply text-3xl mt-12 mb-4 leading-snug;
}

.markdown h3 {
  @apply text-2xl mt-8 mb-4 leading-snug;
}

<修正後>

.markdown h2 {
  @apply text-3xl mt-12 mb-4 leading-snug border-b border-l border-purple-500 pl-2;
}

.markdown h3 {
  @apply text-2xl mt-8 mb-4 leading-snug font-bold;
}

<h2>見出しの左と下に境界線を引いて、左側に少し余白を追加しました。
<h3>見出しを太字にしました。

mdファイル内でMarkdown形式の見出しを記述すると、このページのように表示されます。

## 記事中の見出しのスタイルを変更するには

### CSSも使える

CSSも使える

src/app/globals.cssにCSSを記載しても同じことはできます。

h2 {
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-color: rgb(168 85 247);
  padding-left: 0.5rem;
}

ただしヘッダー部のタイトルにも同じスタイルが適用されてしまいます。
なおCSSとTailwind CSSが競合する場合は後者が優先されます。

記事中の箇条書きのマークを表示するには

リセットCSSによって箇条書き冒頭のマークは表示されなくなってます。src/app/_components/markdown-styles.module.cssに以下を記載することにより表示させます。

.markdown ul {
  @apply list-inside list-circle;
}

.markdown ol {
  @apply list-inside list-decimal;
}

リセットCSS:
globals.cssから呼び出される@tailwind base;が相当、ブラウザによる見え方の差異を無くす働きをする

表示例

mdファイル内でMarkdown形式の箇条書きを記述すると

- 冷蔵庫
- 扇風機

1. 電子レンジ
1. ガスタービン

以下のように表示されます。

冷蔵庫
扇風機

電子レンジ
ガスタービン

記事中の表に線を表示するには

「src/app/_components/markdown-styles.module.css」に以下を記載します。

.markdown td {
  @apply border border-black;
}

.markdown th {
  @apply border border-black text-white bg-[#70acce];
}

ついでに表のヘッダーを白抜き文字に修飾してます。

記事中の表の列幅を固定するには

「src/app/_components/markdown-styles.module.css」に以下を記載します。

.markdown table {
  @apply w-[80%] table-fixed;
}

記事中の表の奇数行と偶数行を塗り分けるには

「src/app/_components/markdown-styles.module.css」に以下を記載します。

.markdown tr {
  @apply odd:bg-white even:bg-slate-100;
}

表示例

mdファイル内でMarkdown形式の表を記述すると

|日本語|English|
|:-|:-|
|青|BLue|
|赤|Red|
|緑|Green|
|黄|Yellow|

以下のように表示されます。

日本語	English
青	BLue
赤	Red
緑	Green
黄	Yellow

記事中のインライン表示を修飾するには

mdファイル内で以下のように`で囲んだ箇所を太字にして「」で囲んで表示するには

ははは`ははは`とわらった

「src/app/_components/markdown-styles.module.css」に以下を記載します。

.markdown p code, .markdown li code {
  @apply font-bold before:content-['「'] after:content-['」'] before:text-[#a2a2ad] after:text-[#a2a2ad];
}

ついでに「」を薄い色にしてます。

表示例

ははははははとわらった