タグ

CSS

1 件の記事

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

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ゴシックのどれが当たるか分からない。デバイス依

約5分