Hugoでブログを作りましたが課題がありました。
ひとまず解消したのでまとめます。

※テーマは「Tranquilpeak」というものを使ってます。他のテーマだと違う所があるかも。

課題１ アイコンの変更方法が不明

config.toml に設定がありました。

[author]
  # 中略
  picture = "images/icon.png"

置き場所が不明でしたが、static ディレクトリからの相対パスのようです。

1
2
3
4
5
6
7
8

$ tree static/ -P icon.png
static/
├── css
├── images
│   ├── 20202011707
│   └── icon.png
├── img
└── js

参考にしたサイト：Hugo テーマ Tranquilpeak の config など。

ちなみにアイコンはこちらの月ノ美兎アイコンをお借りしています。
※ 2020.3.28 現在

課題２ フォントが見づらい

※解消したけど、結構前でちょっとあいまい。。（メモしたつもりで見当たらず）

設定方式

• 「webフォント　おすすめ」で検索して出てきた以下のページの「設定方法」
  https://anyushu.com/web/fonts-osusume/
• CSSへの反映はscssという仕組みでできる（どういうものかはちょっとよく分からない）
  https://maku77.github.io/hugo/advanced/sass.html

これらの設定をlayouts/partials/head.htmlに記述

1
2
3

{{ $style := resources.Get "scss/tranquilpeak.scss" | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">

assetsディレクトリにhugo-tranquilpeak-theme/src/scssの中身をコピー

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$ tree -L 2 assets/ 
assets/
└── scss
    ├── base
    ├── components
    ├── layouts
    ├── pages
    ├── themes
    ├── tranquilpeak.scss
    └── utils

そしてassets/scss/utils/_variables.scssの内容を修正
※font-familyで検索したらこのファイルで指定してるようだった

以下の箇所を変更

• Font familiesとして$noto-sans-serifの設定を追加
• $font-familiesの中の$open-sans-sans-serifとなってる箇所を$noto-sans-serifに書き換える
• 色が薄いので$font-color-baseを#333333に

// Font families
$open-sans:            'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif:   'Merriweather', serif;
$menlo:                 Menlo, Consolas, monospace;
// 行を追加
$noto-sans-serif: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

// $font-family-base: $open-sans-sans-serif;
$font-family-base: $noto-sans-serif;　// noto-sans-serifに変更


$font-families: ( //noto-sans-serifに変更
   // base
   'headings':          $noto-sans-serif,
   // components
   'code':              $menlo,
   'caption':           $merriweather-serif,
   'image-gallery':     $open-sans,
   'post-header-cover': $merriweather-serif,
   'post-meta':         $noto-sans-serif,
//    'post-content':      $merriweather-serif,
   'post-content':      $noto-sans-serif,
   'post-excerpt-link': $noto-sans-serif,
   'highlight':         $menlo,
   // layout
   'sidebar':           $noto-sans-serif
);

// equal to 15px
$font-size-base:      1.6rem;
$font-color-base:     #333333; //色が薄いので変更
// $font-color-base:     #5d686f;
$line-height-base:    1.9em;
$letter-spacing-base: 0.01em;

これでひとまず使いやすくなった。

※これ書いててtomlとcssのシンタックスハイライトが見辛いなと思った。↑のはあえて言語選択してない