【Luxeritas】個別記事タイトルのフォントサイズを画面幅にあわせていい具合に調節するCSS

2019年7月25日Luxeritas

Adjust the font size of the article title to fit the screen width

レスポンシブデザインは画面幅によってカラム数が変化したり、コンテンツ幅が変化します。本文は読みやすいサイズ固定でいいのですが、記事タイトルはコンテンツ幅によってバランスのいいサイズというのが決まってきます。コンテンツ幅に対してフォントサイズが大きすぎると改行されすぎたり、逆にフォントサイズが小さすぎると間延びした感じになっちゃいます。

Luxeritasの場合、フォントサイズの切り替えがスマホ用とPC用の2つしかないのでその中間(ノートPCとかタブレット)サイズでバランスが悪い場合がでてきます。それを何とかしたいというカスタマイズTipsです。

どの辺がバランス悪いのか

ビフォー

下記の動画を再生してみてください。

画面幅が最大(PCサイズ)時と最小(スマホサイズ)の時はバランスがいいのですが、その中間、特に2カラムから1カラムに代わる辺りがバランスが悪いと感じます。

アフター

カスタマイズ後は下記のようになりました。

メインカラムの幅の変化に合わせてタイトルのフォントサイズが細かく変更されているのが分かります。

レスポンシブのブレークポイント

メインカラムの幅の変化に合わせてタイトルのフォントサイズを変更したいので、まずはそのブレークポイントを確認する必要があります。いつも通りChromeのデベロッパーツールを使って調べます。

メインカラムの幅のブレークポイント

調べてみる とメインカラムはid属性"main"を設定しているブロックでそこで幅を指定しています。そこでソースを #main で検索して max-width または width が変更される画面幅を調べます。下記の表がその結果です。

画面幅 @media#main の max-width (width)カラム数
1310px以上866px2
1120~1309px772px2
992~1119px592px2
773~991px772px1
772px以下(100%)1

772px以下の100%とはメインカラム幅が画面幅と同じということですので、カラム幅は無段階に変化します。

記事タイトルのフォントサイズのブレークポイント

記事タイトルのフォントサイズはclass属性 “entry-title" で指定しているのでそれを調べます。Luxeritasテーマのデフォルトだと下記の2段階になります。

画面幅 @media .entry-title の font-size
~575px1.6rem
576px~3.2rem

カラム幅が5段階に対してフォントサイズは2段階のなのでバランスが悪い場合も出てくるでしょう。

CSSカスタマイズ

CSSでフォントサイズの指定に関しては、ようわからんという方はとりあえず下記を参照してください。分かりやすく解説されています。

画面幅に対して設定するフォントサイズ

メインカラム幅のブレークポイントを元にそれぞれのフォントサイズを下記のように設定すると
いい感じになりそうです。

画面幅 @media font-sizeカラム数
1120px以上3.6rem (既定値)2
992~1199px2.4rem2
773~991px3.6rem (既定値) 1
772px以下4.2vw1

772px以下の 4.2vw の vw という単位が今回の肝です。上記のリンク先で開設されてますが、「ビューポートの幅に対する割合」つまりブラウザの横幅全体を「100vw」とした単位です。4.2vwは画面幅の4.2%という意味です。 余白の除いて1行22文字ぐらいになります。

772px以下はカラム幅は100%つまり画面幅と同じなので、フォントサイズは画面幅に比例して無段階に変化します。

追加CSSに挿入するCSSコード

下記のコードを Luxeritas→カスタマイズ(外観)→追加CSS に挿入してください。

/* 個別記事 タイトル  */
.entry-title {
    letter-spacing: -0.01em;
}

@media (min-width: 1310px) {
     #mainEntity > h1 {
        margin: 0 -26px 10px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #mainEntity > h1 {
		font-size: 2.4rem;
    }
}

@media (max-width: 772px) {
    #mainEntity > h1 {
        font-size: 4.2vw;
    }
}
/* 見出しを太字に */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
  • フォントサイズは規定値(3.6rem)以外のみ設定します。
  • class属性 “entry-title" は他でも使用されている(例えば記事一覧の記事タイトル)ので、他に影響を与えない #mainEntity > h1 セレクタで指定しました。
  • letter-spacing で文字間隔をすこし詰めました。
  • ついでにタイトルを含めて見出し(hタグ)を太字に設定しました。

まとめ

今回のカスタマイズは地味なもので、読者が普通に閲覧しているだけでは気が付かないものです。派手な演出で読者におっと思わせるものは何もありません。

しかしこのような細部のデザインまでこだわったサイトは読者にとってなんとなく気持ちいいものです(と思いたい)。テーマカスタマイザーとしては満足度の高いカスタマイズ(単なる自己満足?)でしょう。