Ghostで游ゴシック・ヒラギノを美しく出すCSS設定——和文で読ませるテーマに必要なこと

Ghostのデフォルトテーマ（Casper）で日本語を書き始めると、気になるのはフォントの痩せ方と行間の詰まりだ。

英字組版の土俵に和文を流し込んでいるため、漢字のウエイトが不均一になり、読点の前後が不自然に開く。欧米人が作ったテーマなので当然といえば当然だが、僕の経験で言うと、このままでは日本語で読ませるメディアとして成立しない。

今日は、Ghostに最小限のCSSを追加して和文を美しく表示する設定を具体的に書き出す。テーマを自作しなくても、Code Injectionで貼るだけで見違える。

Casperデフォルトで何が起きているか——和文が貧相に見える3原因

CasperをそのままGhost 6で動かして日本語記事を表示すると、以下の3点が起きる。

① フォント指定に和文が入っていない

Casperの font-family は Inter var・-apple-system・system-ui といった欧文優先の指定だ。macOSでは自動的にヒラギノにフォールバックするが、Windowsでは游ゴシック・Meiryo・MSゴシックのどれが当たるか分からない。デバイス依存でバラつく。

② 行間が欧文基準

Casperデフォルトの本文 line-height は1.6前後。欧文には適正だが、日本語では行間が詰まって見える。スマホ画面だとより顕著で、読む途中で目の流れが止まる。

③ 約物の前後処理がない

句読点（、。）・括弧（「」『』）の前後の空白処理がCSSで指定されていない。結果、「、」の後に広いスペースができたり、「）」の後で詰まったりする。欧文のスペース処理の余りが出ている状態だ。

これらはテーマのバグではない。設計想定外の使い方（和文で運用する）をしているだけなので、CSSで補正する。

Webフォント読み込み——Zen Kaku Gothic / Noto Sans JPの設定

まず、フォント自体を日本語対応のものに差し替える。2026年時点でおすすめは以下の2択だ。

Zen Kaku Gothic Antique（個人的推奨）

Google Fontsで配信されているフリー日本語フォント。モダンで読みやすく、見出しにも本文にも使える。字面が整っていて、Casperの洗練された雰囲気に馴染む。

Noto Sans JP

Googleの定番日本語フォント。幅広いウエイト（100〜900）に対応。こちらもGoogle Fontsから配信。より中立的で、どんなコンテンツにも合う汎用性がある。

Ghost Code InjectionからWebフォントを読み込む

Ghost管理画面 Settings → Code injection → Site Header に以下を貼り付ける。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap" rel="stylesheet">

preconnect は先にFontsドメインとの接続を張っておく最適化。display=swap はフォント読み込み中もテキストを表示させる指定だ。

ウエイトの選び方

本文用に400（Regular）・500（Medium）・700（Bold）の3種類あれば十分だ。ウエイトを増やすほど読み込みサイズが増えるため、使わないウエイトは指定しない方がいい。

システムフォント優先の書き方——游ゴシック・ヒラギノをフォールバック

Webフォントを読み込むと、ページロードで多少の遅延が出る。これを嫌う場合は「システムフォント優先」の選択もある。

システムフォント指定の例

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

この指定で、macOS/iOSではヒラギノ、Windowsでは游ゴシック、いずれも揃わない環境ではMeiryoにフォールバックする。Webフォント読み込みが発生しないため、ページ表示が速くなる。

WebフォントとシステムフォントのハイブリッドもOK

見出しだけZen Kaku Gothic、本文はシステムフォント、という併用設計も有効だ。読み込み負荷を抑えながらブランドらしさを出せる。

h1, h2, h3, h4 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

body {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}

この書き方で、見出しは個性的に・本文はシステムフォントで軽快に、という運用になる。

行間・文字間隔・段落間隔の推奨値

日本語で読みやすい数値を表にまとめる。

最小構成のCSS

.gh-content p {
  line-height: 1.85;
  letter-spacing: 0.03em;
  margin-bottom: 1.6em;
}

.gh-content h2 {
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-top: 2.5em;
  margin-bottom: 1em;
}

.gh-content h3 {
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-top: 2em;
}

.gh-content はGhostの記事本文に付くデフォルトのクラスだ。テーマによっては .post-content が使われている場合もあるので、ブラウザの開発者ツールで実際に使われているクラス名を確認する。

約物半角・禁則処理の最小CSS

日本語組版で最後の仕上げになるのが、約物（句読点・括弧）の処理と禁則処理だ。

約物半角（font-feature-settings "palt"）

body {
  font-feature-settings: "palt" 1;
}

"palt" はProportional alternate widthsの略で、句読点や括弧を半角幅に詰める指定だ。これを入れることで、「、」「。」の後の不自然な広い空白が詰まる。

ただし一部のフォントではサポートされていない。Zen Kaku Gothic Antiqueは対応している。システムフォントでもヒラギノ・游ゴシックは対応済みだ。

禁則処理（word-break と line-break）

body {
  word-break: normal;
  line-break: strict;
}

line-break: strict にすると、行頭に来てはいけない文字（句読点・小書き仮名・閉じ括弧等）が適切に処理される。日本語の読みやすさを底上げする最小の指定だ。

長い英単語・URLの折返し

.gh-content p {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

記事中に長いURLや英単語がある時、適切な位置で折り返さないとレイアウトが崩れる。overflow-wrap: anywhere で強制的に折返しを有効にする。

Code Injection or テーマ改造——どちらで入れるか

これまで紹介したCSSを入れる方法は2つある。

方法1: Code Injection（Settings → Code injection → Site Footer）

Ghost管理画面から、記事を再ビルドせずにCSSを追加できる。シンプルな対応ならこれで十分だ。

メリット:

• テーマのアップデートに影響されない
• サイトを壊してもすぐに戻せる（CSSを削除するだけ）
• Ghost Proでもセルフホストでも同じ手順で使える

デメリット:

• CSSがサイト全体に追加で読み込まれるため、ページロードがほんの少し遅くなる
• Code Injection欄のUIが編集しづらく、大きなCSSは管理が大変

方法2: テーマファイルを直接編集

セルフホスト（VPS運用）の場合、テーマフォルダの assets/built/screen.css を編集してサイト本体のCSSを上書きできる。

メリット:

• サイト本来のCSSと統合されるため、ページロードへの影響が最小
• Gitでバージョン管理できる
• 大規模な編集・差分管理に向く

デメリット:

• テーマをアップデートすると上書きされる危険性（フォーク運用が必須）
• セルフホスト前提。Ghost Proでは直接編集はできない
• Sass/CSSビルドの知識が要る

結論: まずCode Injectionで始める

数十行のCSSならCode Injectionで問題ない。数百行を超えたり、大規模な独自テーマを作る段階になったらテーマ改造に移る。

Ghostの日本語テーマ事情そのものについてはGhostの日本語テーマ事情2026でまとめた。初期セットアップ全体の流れはGhost Pro初期設定ガイドを参照してほしい。

まとめ

Ghostで和文を美しく出すために必要な最小構成は、以下の3点だ。

1. フォント: Zen Kaku Gothic Antique or システムフォント（ヒラギノ・游ゴシック）
2. 行間・字間: line-height 1.85・letter-spacing 0.03em
3. 約物・禁則: font-feature-settings "palt"・line-break strict

このCSSをCode Injectionの Site Footer に貼り付ければ、日本語サイトとしての見栄えが大きく変わる。デフォルトのCasperがそのまま日本語で読めるテーマに近づく。

僕が複数のGhostサイトで試行錯誤した末に落ち着いた最小構成を、そのまま下に置いておく。

/* Webフォント（Zen Kaku Gothic）- Site Headerにlinkタグも追加 */
body {
  font-family: "Zen Kaku Gothic Antique", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-feature-settings: "palt" 1;
  word-break: normal;
  line-break: strict;
}

.gh-content p {
  line-height: 1.85;
  letter-spacing: 0.03em;
  margin-bottom: 1.6em;
  overflow-wrap: anywhere;
}

.gh-content h2 {
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-top: 2.5em;
}

.gh-content h3 {
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

これで最低限の和文最適化は完了する。さらに細かい調整（モバイル専用値・見出しデザイン・コードブロック）は個別に足していけば良い。

CSSは執筆時点（2026年4月）のGhost 6系Casperを前提にした。テーマによってはクラス名が異なる可能性があるため、開発者ツールで実際のHTML構造を確認して調整すること。