Hugoの設定カスタマイズした

 ·  ☕ 2 

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

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

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

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 現在

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

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

設定方式

これらの設定を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 Pゴシック', '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のシンタックスハイライトが見辛いなと思った。↑のはあえて言語選択してない