microCMSで使えるデフォルトタグのデザイン合わせ

2026/4/25

microCMSで使えるデフォルトタグのデザイン合わせの記事。

リセットCSSをWebサイト全体に適用しているので、個別に装飾を当てる必要があります。

「リセットをしない」方が楽なのか、「リセットしたうえでブログ記事にだけ当てる」方が楽なのか迷いますが、キメラサイトなので会えてブログ個別に適用することを選択しました。

この記事は、全体的なバランスを確認するための記事です。

見出し1

段落／段落／段落／段落／段落

太字

斜体

下線

~~取り消し線~~

コード

区切り線

引用

export const getHelloWorld = (): string => {
  return "Hello world";
}

id	name	date
1	名前1	2026/4/1
2	名前2	2026/10/10

埋め込み

一通り追加しました。

次に、この記事を見ながらCSSを調整していきます。

ディレクトリ構成はこう。

blog
　┗ [slug]
　　┣ page.module.css
　　┗ page.tsx

page.tsxではpage.module.cssをimportしており、開発者モードでタグを確認しながら記事専用のCSSを仕上げて完成です。

結構ブログライクなデザインにできたと思う。