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

2019年7月25日2019年12月28日Luxeritas

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

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

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

ビフォー

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

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

アフター

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

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

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

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

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

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

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

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

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

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

CSSカスタマイズ

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

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2

ーーーーーーーーー追記2020年10/15この歳になるとこういう記事のアプトプット怖いですね。。とりあえ ...

 https://qiita.com/39_isao/items/e8242901ba1aadb75676

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

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

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タグ)を太字に設定しました。

まとめ

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

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