HugoのBlowfishテーマで日本語表示を改善するためのCSSオーバーライド方法を紹介します。フォント設定、折り返しルール、Yaku Han JPの読み込みを解説します。
環境#
- Windows 11
- Git Bash
- Hugo v0.150.0
- Blowfish v2.90.0
カスタムCSSの作成#
Blowfishテーマではassets/css/custom.cssを読み込ませて既存スタイルをオーバーライドできます。
Bash
mkdir -p assets/css
code assets/css/custom.css作成したファイルにフォントと折り返し設定を記述します。
assets/css/custom.css
/* フォント設定 */
html {
font-family: "Helvetica Neue",
Arial,
YakuHanJP,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Noto Sans JP",
Meiryo,
sans-serif;
}
/* テキストの折り返し設定 */
body {
overflow-wrap: anywhere;
word-break: auto-phrase;
line-break: strict;
}日本語フォントを優先的に指定しauto-phraseで文節単位の折り返しを有効化します。これにより読みやすさが向上します。
ヘッダー拡張によるYaku Han JPの読み込み#
次に、日本語の約物を半角で表示できる
Yaku Han JP
を読み込むために、ヘッダーを拡張します。
Blowfishテーマではlayouts/partials/extend-head.htmlを読み込ませてヘッダーを拡張できます。
Bash
mkdir -p layouts/partials
code layouts/partials/extend-head.htmllayouts/partials/extend-head.htmlに以下を追加します。
layouts/partials/extend-head.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css">