SWELL│小数点の入るフォントサイズを制御する方法

SWELLでは、本文サイズのCSS変数--swl-fz--contentに画面幅に応じた値を設定します。SWELL 2.19.0の初期値はスマホ側が4vw、600px以上が16pxです。カスタマイザーの設定や追加CSSで変わるため、全画面幅で4vwになるわけではありません。

以下は過去の環境でH2見出しが19.872pxになった例です。現在の初期設定を示す値ではありません。

em指定の見出しは親の文字サイズから計算されます。たとえば本文16pxに1.2emを掛けると19.2pxです。小数値はvw以外でも生じ、表示不具合とは限りません。下のCSSは仕組みの説明用で、メディアクエリを省略しているため、全幅へそのまま追加するコードではありません。

:root {
    --swl-fz--content: 4vw;
}

#lp-content .post_content, #main_content .post_content {
    font-size: var(--swl-fz--content, 16px);
}

.post_content h2 {
    font-size: 1.2em;
}

vwを使うとデバイスによって小数点が入るフォントサイズになるということになります。

しかしデザイナーさんの思想（たとえば8の倍数でデザインガイドを作成している等）と合わないことがあります。

しっかりデバイス毎に指定されたフォントサイズを守ろうとすると、SWELLベースの場合は上書きする要素が逆に増えてしまった経験があります。

そこでvwが使われているフォントの要素を洗い出してみました。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLのフォントサイズでvwが使われている場所

本文を調整する場合は、まずカスタマイザーの文字サイズ設定を確認します。ルート変数は本文に影響しますが、個別にvwを指定したタイトルやカードまで一括で固定するものではありません。

以下は既存CSSの説明用抜粋です。メディアクエリを省略した抜粋も含むため、追加CSSへ一括で貼らないでください。実際の適用条件は使用中のテーマとブラウザーの開発者ツールで確認します。

コンテンツ全体

emを使っている見出しなどに影響します。

:root {
    --swl-fz--content: 4vw;
}

#lp-content .post_content, #main_content .post_content {
    font-size: var(--swl-fz--content, 16px);
}

H1

記事タイトルのフォントサイズ

.c-postTitle__ttl {
    font-size: 5vw;
}

本文

pタグに影響しています。

指定は上の「コンテンツ全体」と同じで、変数--swl-fz--contentが無い時は16pxを採用します。

ブログカード

@media not all and (min-width: 600px) {
    .p-blogCard__title {
        font-size: 3.6vw;
    }
}

その他まとめ

.c-postTitle__ttl {
  font-size: 5vw;
}

.c-postTitle__date .__y {
  font-size: 3vw;
}

.c-postTitle__date .__md {
  font-size: 4.2vw;
}

.p-postList .c-postTitle__date .__md,
.p-postList .c-postTitle__ttl {
  font-size: 4vw;
}

.-type-card .p-postList__title,
.-type-list .p-postList__title,
.-type-list2 .p-postList__title {
  font-size: 3.6vw;
}

.-type-card .p-postList__excerpt {
  font-size: 3.2vw;
}

.-type-list .p-postList__excerpt,
.-type-list2 .p-postList__excerpt {
  font-size: 3.4vw;
}

.-w-ranking.-type-card .p-postList__item:before {
  font-size: 3.2vw;
}

.-w-ranking.-type-list .p-postList__item:before {
  font-size: 3vw;
}

.c-widget__title {
  font-size: 4vw;
}

.cat-post-count,
.post_count,
.tag-link-count {
  font-size: 3vw;
}

.wp-block-code.wp-block-code {
  font-size: min(14px, 3.4vw);
}

@media not all and (min-width: 600px) {
  .p-blogCard__title {
    font-size: 3.6vw;
  }

  .p-postList__title .-type-thumb.-sp-col2 {
    font-size: 3.2vw;
  }

  .-type-card.-sp-col1 .p-postList__title {
    font-size: 3.8vw;
  }
}

本文全体を変える前に、対象ブロックだけ固定する

まず「外観 → カスタマイズ」の文字サイズ設定を確認し、変更前の値を控えます。特定の案内欄だけに固定値が必要なら、その欄をグループブロックで囲み、グループの「高度な設定 → 追加CSSクラス」に waza-fixed-type を入力してください。標準グループが内部に追加する枠にも対応しています。続くCSSを「追加CSS」へ貼り付けると、グループ直下の段落を16px、H3を20pxにします。サイト全体のタイトルや本文は対象にしません。

.waza-fixed-type { font-size: 16px; }
.waza-fixed-type > p,
.waza-fixed-type > .wp-block-group__inner-container > p { font-size: 16px; }
.waza-fixed-type > h3,
.waza-fixed-type > .wp-block-group__inner-container > h3 { font-size: 20px; }
.waza-fixed-type > .waza-type-em,
.waza-fixed-type > .wp-block-group__inner-container > .waza-type-em { font-size: 1.2em; }

比較行だけは段落の「追加CSSクラス」に waza-type-em を付けています。小数が残る理由を確認するための行なので、固定した16pxの段落だけが必要ならこの行を作る必要はありません。CSSは本文のフォント設定を固定する例で、ブラウザーの文字拡大を止める指定は含みません。文字サイズは画面幅を変えて実測しましたが、ブラウザーのページズームや文字拡大を操作したときの見え方は確認していません。

390px・599px・600px・960px・1280pxの各幅で見本を確認し、文字の拡大時にも読めるかを確認します。元に戻すには、追加した4つのCSS指定と2つの専用クラスだけを取り除きます。カスタマイザーも変更した場合は控えた設定へ戻します。レイアウトの切り替えはブレイクポイントの比較見本で確認できます。

公開画面の確認記録

まとめ

小数pxをなくすこと自体を目的にせず、読みやすさとレイアウトを確認します。設定変更前の値を控え、スマホ幅・600px以上・文字の拡大表示で確認してください。元に戻す場合はカスタマイザーの値を復元し、今回追加したCSSだけを取り除きます。

過去のコード資料はGitHubのMOTOKI-LLC/WAZA-codeに残しています。上の専用クラスを使う新しい見本とは同期していないため、現在の実装にはこのページのコードを使ってください。

よくある質問：SWELLの小数点の入るフォントサイズを制御する方法

SWELLのフォントサイズに、なぜ小数点が入るのですか？

記事では、SWELLでは本文サイズのCSS変数に画面幅に応じた値を設定します。SWELL 2.19.0の初期値はスマホ側が4vw、600px以上が16pxで、カスタマイザーの設定や追加CSSで変わるため、全画面幅で4vwになるわけではありません。vwを使うとデバイスによって小数点が入るフォントサイズになります。

vwとは、何ですか？

記事では、CSSの「vw」は「viewport width」の略で、ビューポートの幅の1%に相当します。1vw＝ビューポート幅÷100で、例えば画面幅が1440pxなら1vwは14.4px、5vwは72pxです。

小数のフォントサイズは、不具合ですか？

記事では、em指定の見出しは親の文字サイズから計算されます。たとえば本文16pxに1.2emを掛けると19.2pxです。小数値はvw以外でも生じ、表示不具合とは限りません。小数pxをなくすこと自体を目的にせず、読みやすさとレイアウトを確認します。

本文全体のサイズを変えたいときは？

記事では、本文を調整する場合は、まずカスタマイザーの文字サイズ設定を確認します。ルート変数は本文に影響しますが、個別にvwを指定したタイトルやカードまで一括で固定するものではありません。

特定の欄だけ、フォントサイズを固定するには？

記事では、対象の欄をグループブロックで囲み、グループの「高度な設定 → 追加CSSクラス」に専用クラスを入力し、続くCSSを「追加CSS」へ貼り付けると、グループ直下の段落を16px、H3を20pxにします。サイト全体のタイトルや本文は対象にしません。スマホ幅でも同じCSSピクセル値を使います。

ブラウザーの文字拡大は、どうなりますか？

記事では、CSSは本文のフォント設定を固定する例で、ブラウザーの文字拡大を止める指定は含みません。文字サイズは画面幅を変えて実測しましたが、ブラウザーのページズームや文字拡大を操作したときの見え方は確認していません。390px・599px・600px・960px・1280pxの各幅で見本を確認し、文字の拡大時にも読めるかを確認します。

元に戻すには、どうしますか？ 過去のコードは使えますか？

元に戻すには、追加した4つのCSS指定と2つの専用クラスだけを取り除きます。カスタマイザーも変更した場合は控えた設定へ戻します。記事では、過去のコード資料はGitHubのMOTOKI-LLC/WAZA-codeに残していますが、専用クラスを使う新しい見本とは同期していないため、現在の実装にはこのページのコードを使ってください。テーマの更新で初期値が変わる可能性があるため、最新は公式で確認してください。