【2020年3月更新】
ワードプレスの新デフォルトテーマ「Twentynineteen」で最初に面食らうのは、そのフォントサイズの大きさ。各種フォントサイズを調整しました。(飽くまで私の好み)
※全体の文字の大きさを確認する前に、先にヘッダーメニューやウィジェットエリアをつけた方がスムーズです。
基準フォントの調整
基準フォントサイズを22pxから16pxへと変更しました。
外観 → 追加CSS
Before:
After:
使用したコードは、
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; } }
ウィジェットリストのサイズ変更
.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を越えない様に調整しました。
最後までお読みいただきありがとうございました。
こちらのCSSを使用させていただきました!
ブログ作成でGutenbergを使ってみようかと思いながらも、なかなか進まない中、大変見やすくなりました。
ありがとうございます!
コメントありがとうございます。励まされました。