ブログを改良しました

ブログ改良しました

色々ブログを改良しました。記事にタグ付け、h1 タグを目次として出力、TailWindCSS、PurgeCSS、FontAwesome、ページネーションの導入をしました。

この中でも特に、TailWindCSS の導入にはかなり苦労しました。このブログは gatsby-starter-blog をもとに改良しているのですが、単純に TailWindCSS を導入しただけでは、レイアウトがグチャグチャになってしまいました。CSS の読み込ませる順番を変えたり、新しく CSS ファイルを作成して TailWindCSS を上書きしたりしました。ブログの記事を表示する箇所だとなぜか、ディスクリプションが出てこなかったりしたので、こちらのリポジトリにある、markdown.cssを参考に書き換えました。

入れ子のディスクリプションだと下に不自然な空白があく

ただし、このままだと入れ子になったディスクリプションだと下に空白が空いてしまいました。そこで、以下のようにすることで解決しました。

.markdown ul {
  @apply mb-8 list-disc;
}

.markdown ol {
  @apply mb-8 list-decimal;
}

.markdown li > ul {
  margin-bottom: 0;
}

こうすることで、空白を無理やり消しました。CSS は難しいです。