GeneratePressの見出しフォントの調整

GeneratePressでブログ記事などを書くと、タイトルがH1になります。ですから、本文中で見出しを入れるならH2にするのが適切です。

ところが、デフォルト状態だと、H2はかなり文字が大きいように思います。ここでは単純に、H2とH3の大きさをそろえることで見た目を整えたいと思います。

GeneratePressのカスタマイザー画面

これが調整後のH2です

というわけで、カスタマイザーの「タイポグラフィ」で、H2をH3と同じ29pxに変更しました。

これにあわせて、少し見出しらしく上側に空きスペースを追加しましょう。

.single-post .entry-content h2 {
  margin-top: 2rem;
}

「追加CSS」にこのように追加してみました。これはブログ投稿(single-post)の本文エリア(entry-content)のh2見出しにスタイルを加えるものです。

個別記事のH1や見出しのウェイトを調整

上記のカスタマイザー設定、タイポグラフィでは、さまざまな文字にかかわる設定が行えます。まず「フォントマネージャー」でフォントを設定して、それを「タイポグラフィマネージャー」で必要なエレメントに割り当てる、という二層構造になっています。

この優れたタイポグラフィ機能はGeneratePressの特徴の1つですので、ぜひいろいろ試行錯誤してみてください。PC画面とモバイル画面でフォント設定を変更する機能もあります。

当サイトでは、この記事を書いたH2の文字サイズ以外にも、個別記事のH1の文字サイズや、見出しウェイトの調整をこのカスタマイザーで行っています。海外のテーマはタイトル文字が大きすぎる傾向があるので、全体として手を入れると収拾がつかなくなるかもしれませんが、見出しサイズは好みに応じて調整するのがよいと思います。

関連記事:GeneratePressに日本語フォントを設定する