Hexoブログの見た目は、フォントの選択によって大きく変わります。特に日本語サイトでは、適切なフォント設定が読みやすさに直結します。この記事では、Butterflyテーマでフォントをカスタマイズする方法を、実際の設定例とともに解説します。

フォントカスタマイズの目的

Butterflyテーマのデフォルトフォントは、日本語サイトにとって必ずしも最適ではありません。以下の課題があります:

  • 句読点の位置が不自然
  • フォントウェイトのバランスが悪い
  • 本文と見出しの区別が不明確

これらの問題を解決し、より読みやすいブログにするためのフォント設定方法を紹介します。

フォントファイルの準備

まず、使用するフォントファイルを配置します:

  1. source/fontディレクトリを作成
  2. 以下のフォントファイルを配置:
    • 本文用: Noto Sans JP(Light, Medium, Bold)
    • コード用: Source Han Code JP(Light, Medium, Bold)
1
mkdir source/font

カスタムCSSの作成

source/css/custom.cssを作成し、フォントの設定を記述します:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* フォントの基本設定 */
@font-face {
font-family: 'NotoSansJP';
src: url('/font/NotoSansJP-Light.ttf') format('truetype');
font-weight: 300;
font-display: swap;
}

@font-face {
font-family: 'NotoSansJP';
src: url('/font/NotoSansJP-Medium.ttf') format('truetype');
font-weight: 500;
font-display: swap;
}

@font-face {
font-family: 'NotoSansJP';
src: url('/font/NotoSansJP-Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
}

/* 全体のフォント設定 */
:root {
--body-font: 'NotoSansJP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 基本フォント設定 */
body {
font-family: var(--body-font);
font-weight: 300;
font-feature-settings: "palt";
text-align: justify;
text-justify: inter-ideograph;
}

Butterflyテーマの設定変更

_config.butterfly.ymlで以下の設定を行います:

1
2
3
4
5
6
7
8
9
10
11
# Global font settings
font:
global-font-size: 16px
code-font-size: 14px
font-family: var(--body-font)
code-font-family: var(--code-font)

# Inject
inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="print" onload="this.media='all'">

フォントウェイトの使い分け

読みやすさを考慮して、以下のようにフォントウェイトを使い分けています:

  1. 本文: Light(300)

    • 長文を読むときの目の疲れを軽減
    • 適度な明度で読みやすさを確保
  2. 見出し: Medium(500)

    • 本文との区別を明確に
    • 適度な強調を実現
  3. 強調: Bold(700)

    • 重要な部分を効果的に強調
    • 見出しや本文との階層を明確に

設定の反映方法

設定を反映するには、以下のコマンドを実行します:

1
hexo clean && hexo generate

まとめ

適切なフォント設定は、ブログの読みやすさを大きく向上させます。今回の設定により:

  • 自然な句読点の配置
  • 読みやすい本文
  • 明確な見出しの階層構造
  • 効果的な強調表現

が実現できました。これらの設定は、必要に応じて調整することができます。

参考リンク