CSSの変更方法

  • PaperModではthemes/PaperMod/assets/css/に基本的なCSSが配置されている
  • これらをファイル単位でオーバーライドすることによって実現する
  • extendedフォルダを使う1ようなFAQがあるが、今回は既存のスタイル指定を変更したいので、Hugoのルートにassets/cssフォルダを作って、その中に既存のCSSファイルをコピーし、コピーで作られたCSSファイルを編集することで行った

見出しの先頭に#をつける

  • 記事内の要素はcommon/post-single.cssに記載されていたので以下を追記した
1
2
3
4
5
6
7

.post-content h2:before {
    content: "## ";
}

.post-content h3:before {
    content: "### ";
}

見出しのmargin調整

  • 記事内の要素はcommon/post-single.cssに記載されていたので以下のように書き換えた
1
2
3
4
5
6
7
8
9

.post-content h2 {
    margin: 96px auto 24px;
    font-size: 32px;
}

.post-content h3 {
    margin: 32px auto;
    font-size: 24px;
}

配色の変更

明暗切り替えボタンの移動

Web font導入

Google Fontsでもsrc: local を使いたいから

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@font-face {
    font-family: "Roboto";
    src: local("Roboto");
}

@font-face {
    font-family: "Noto Sans JP";
    src:
        local("Noto Sans CJK JP"),
        local("Noto Sans JP");
}

を後に読まれるCSS(reset.css)に書いたfont読み込みは早い段階で書いた

Notes

  1. FAQs · adityatelange/hugo-PaperMod Wiki · GitHub↩︎