easy-notion-blogの記事のCSSを調整する

easy-notion-blogの記事のCSSを自分好みに変更しました。

変更したCSS 見出し変更前変更後引用変更前変更後区切り線変更前変更後コールアウト変更前変更後段落の余白変更前変更後終わりに

変更したCSS

見出し

見出し1はh4、見出し2はh5、見出し3はh6です。

変更前

.post :global(h4) {
  margin: 1.8rem 0 0.8rem;
  color: var(--fg);
  font-size: 1.1rem;
}
.post :global(h4):after {
  color: var(--accents-1);
  font-size: 0.9rem;
  content: '▼';
  padding-left: 0.2rem;
}
.post :global(h5) {
  margin: 1.8rem 0 0.8rem;
  color: var(--fg);
  font-size: 1.1rem;
}
.post :global(h5):after {
  color: var(--accents-1);
  font-size: 0.9rem;
  content: '▼';
  padding-left: 0.2rem;
}
.post :global(h6) {
  margin: 1.8rem 0 0.8rem;
  color: var(--fg);
  font-size: 1.1rem;
}
.post :global(h6):after {
  color: var(--accents-1);
  font-size: 0.9rem;
  content: '▼';
  padding-left: 0.2rem;
}

src\styles\blog.module.css

変更後

.post :global(h3) {
  font-size: 2.0rem;
  margin: 0;
  color: var(--fg);
}
.post :global(h4) {
  margin: 2.2rem 0 2.4rem;
  color: var(--fg);
  font-size: 1.8rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.1em;
  line-height: 1.5;
}

.post :global(h5) {
  margin: 2.2rem 0 2.4rem;
  color: var(--fg);
  font-size: 1.6rem;
  line-height: 1.5;
}

.post :global(h6) {
  margin: 1.8rem 0 0.8rem;
  color: var(--fg);
  font-size: 1.2rem;
}

src\styles\blog.module.css

引用

変更前

.post :global(blockquote) {
  margin: 0.6rem 0;
  padding: 0 0.9rem;
  border-left: 3px solid var(--fg);
  font-size: 1rem;
  line-height: 1.8rem;
}

src\styles\blog.module.css

変更後

.post :global(blockquote) {
  margin: 0.6rem 0;
  padding: 0 0.9rem;
  border-left: 3px solid #9dacb7;
  font-size: 1rem;
  line-height: 1.8rem;
  color: #505c64;
}

src\styles\blog.module.css

区切り線

変更前

hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 0.3rem 0;
  background-color: #333;
}

src\styles\global.css

変更後

hr {
  display: block;
  height: 2px;
  border: 0;
  margin: 2.5rem 0;
  background-color: #5c93bb2b;
}

src\styles\global.css

コールアウト

コールアウトは以下のようにNotion側で改行をしてもブログでは改行が反映されなかったため、改行をするためにwhite-space: pre-wrap;を追加しました。

notion側では下記の様に記載している。

変更前

改行が反映されない。

.callout {
  display: flex;
  margin: 1rem auto;
  padding: 16px 12px;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.6rem;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: rgba(235, 236, 237, 0.6);
}

src\styles\notion-block.module.css

変更後

改行が反映される。

.callout {
  display: flex;
  margin: 1rem auto;
  padding: 16px 12px;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.6rem;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background: rgba(235, 236, 237, 0.6);
  white-space: pre-wrap;
}

src\styles\notion-block.module.css

段落の余白

変更前

.post :global(p) {
  margin: 0.3rem 0;
  font-size: 1rem;
  min-height: 1.8rem;
}

src\styles\blog.module.css

変更後

.post :global(p) {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
  min-height: 1.8rem;
}

src\styles\blog.module.css

終わりに

記事のCSSの変更については、困ることなく変更することができました。

CSS以外にも、記事内目次を追加したい、サイドバーに目次を追加したい、そもそも記事のページ以外を増やしたいなど、いろいろ機能追加したい内容があります。

しかしカスタマイズ方法が全然わからないので、ReactとNEXT.jsのチュートリアルでもやってみようかなと思います。