VSCode+Hugo+GitHubでつくるブログ

VSCode+Hugo+GitHubでつくるブログ#04

～カスタムCSSを設定をしよう！～

はじめに

みなさんこんにちは！
前回はブログの詳細設定をしていきました。ですが、フォントが中国語フォントになってしまっていましたね。
ということで今回は、ブログの日本語化を行っていきます。
少し短めですが、よろしくお願いします！

対象

  • VSCode+Hugoでブログを作りたい方
  • Stackの日本語フォントを設定したい方

前提

  • Windowsな環境であること
  • Hugoをインストールしてあること
  • GitとVSCodeをインストールしていること
    • まだな方は、こちらの記事を参考にインストールしてください。
    • GitHubとの連携まで済ませておいてください。

Stackの日本語化

今回使用しているテーマのStackは、標準の状態では日本語用のフォントが設定されておらず、日本語で記事を作成した場合は中国語フォントで表示されてしまいます。それでは困りますので、カスタムCSSを使用して日本語化を行います。

なお、今回行う内容は、こちらの記事を参考にさせて頂きました。

  1. themes/hugo-theme-stack/scssにcustom.scssというファイルがあると思います。これがカスタムCSSのファイルですので開きましょう。
  2. 次のように追記します。 
    1
2
3
4
5
6

    :root {
     --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
     --ja-font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
     --base-font-family: "Lato", var(--sys-font-family), var(--ja-font-family), sans-serif;
     --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--ja-font-family), monospace;
   }
  3. ブログを確認してみましょう。日本語がしっかりと日本語フォントで表示されているはずです。

おわりに

今回は非常に短いですが、これでお終いにします。
次回はQiitaやGitHubに実装されているアラート機能を実装してみたいと思います。
ちなみにアラートとはこういうやつ。

これがアラートです！

それではまた！

参考文献

© 2024 - 2026 TATSUYA Chiba
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。