Twenty Nineteen-5、文字を小さくする


【2020年3月更新】

ワードプレスの新デフォルトテーマ「Twentynineteen」で最初に面食らうのは、そのフォントサイズの大きさ。各種フォントサイズを調整しました。(飽くまで私の好み)

※全体の文字の大きさを確認する前に、先にヘッダーメニューやウィジェットエリアをつけた方がスムーズです。

基準フォントの調整

基準フォントサイズを22pxから16pxへと変更しました。

外観 → 追加CSS

Before:

Twenty Nineteen、文字サイズ初期値
Twenty Nineteen、文字サイズ初期値

After:

Twenty Nineteen、基本フォントサイズ修正後
Twenty Nineteen、基本フォントサイズ修正後

使用したコードは、

html { 
font-size: 16px;
}

これで、基準フォントが効いているフォントが一律で16px基準に調整されます。

この数字はお好みで。

px指定の6か所を修正

px指定の場所は基準フォントの修正が効きません。

全6か所の中で、私が変更したのは、画面サイズが1,168px以上の時の基準フォントサイズ、ウィジェットリストの文字サイズです。

※基準フォントを16pxと決めた後は、それ以外のフォントを、em、rem、%などで「相対的」なサイズを指定するのが一般的なのですが、このテーマは、「font-size: calc(22px * 1.125);」というようにちょいちょいピクセル指定が入っています。

画面サイズが1,168pxの基準フォント

画面サイズが大きくても、文字の基準サイズは16pxのままにしたい場合↓

@media only screen and (min-width: 1168px) {
  .entry .entry-content .wp-block-file .wp-block-file__button {
		font-size: 1rem;
    }
}

ウィジェットリストのサイズ変更

Twenty Nineteen、ウィジェットエリアのフォントサイズ
Twenty Nineteen、ウィジェットエリアのフォントサイズ
.widget_archive ul li,
.widget_categories ul li,
.widget_meta ul li,
.widget_nav_menu ul li,
.widget_pages ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.widget_rss ul li {
  font-size: 1rem;
}

ウィジェットのリストエリアの文字サイズも、16px (1rem)に変更。

各見出しのフォントサイズ調整

このテーマは見出しのサイズが細かく指定され過ぎていて、微妙。個人的に気になるところだけ調整しました。

表示スクリーンサイズが768pxの時の、h1タグ

ページタイトルに使用されています。

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
}

基準サイズが2.25emでしたので、それ以上のサイズになる部分も2.25emで頭打ちになるように調整しました。

h2タグ(大見出しに使用)

@media only screen and (min-width: 768px) {
  .entry-title,
  .not-found .page-title,
  .error-404 .page-title,
  .has-larger-font-size,
  h2 {
    font-size: 1.75rem;
  }
}

スクリーンのサイズに関係なく、フォントサイズが1.75emを越えない様に調整しました。

h3タグ(中見出しに使用)

.has-regular-font-size,
.has-large-font-size,
.comments-title,
h3 {
  font-size: 1.5em;
}

スクリーンのサイズに関係なく、中見出しのフォントサイズが1.5emを越えない様に調整しました。

最後までお読みいただきありがとうございました。


“Twenty Nineteen-5、文字を小さくする” への2件のフィードバック

    • コメントありがとうございます。励まされました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です