Twentynineteen、文字を小さくする

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

基準フォントの調整

基準フォントサイズを22pxから16pxへと変更しました。(外観 → CSS編集のみ使用)

元々のホームは↑、字が大きすぎて、何も読めないです。

基準フォントが22pxになっているので、これを16pxに変更しました。

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

16pxを基準フォントサイズにしたのは、これが一般的なブラウザーの標準だから。テーマをコロコロ変えていると16pxを基準にするのが最もシンプルなんですよね。

使用したコードは、

html { 
font-size: 16px;
}

何故かpx指定の他6か所

フォントサイズの指定は、基準フォントを決めたら、em、rem、%で残りのサイズを指定するのが一般的なのですが、このテーマは、「font-size: calc(22px * 1.125);」というようにちょいちょいピクセル指定が入っていて、修正が面倒臭い感じです。

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

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

画面サイズが大きくても、文字は大きくしないでほしい。個人的な好みなので、アレですが。

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

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

.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に変更。

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

このテーマは見出しのサイズが細かく指定され過ぎていて、微妙。

とりあえず、鼻につく部分だけ修正しました。

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を越えない様に調整しました。

サンプルサイト：へたはん

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