経緯

テーマファイルのzzoを利用しているのだが、ところどころ気に入らない部分があるのでカスタムCSSを設定して好みの表示にする。

すでに適応されているテーマファイルのCSSを編集する手もあるが、カスタムCSSで上書き指定できるのでミスっても修正がかんたんそうなのでカスタムCSSで指定することにした。

params.toml に追記とファイルの設置

zzoでカスタムCSSを使用するには、Hugo/config/_default/params.tomlに下記行を追記する。

1

custom_css = ["css/custom.css"]

つぎに、上で指定したCSSファイルを設置して編集していく。

Hugo/assets/css/custom.css

注意すべきは、すでにテーマファイルのCSSやscssで指定されている項目を変更する場合には

1
2
3

#body {
  background-color: red !important;
}

!importantで優先順位をあげる必要がある。