みどりとくらす

バラとランと多肉と観葉植物と・・・

【CSS3】ベースのフォントの種類(font-family)とサイズ(font-size)を変更

WordPress のブログに海外で開発されたテーマを適用すると、フォントの設定が日本語以外の設定になっていて、かなり気になります。そこで、日本語環境にあった設定に変更する必要がある、と個人的に信じています。当然ですが、日本語の環境への設定していなくても、表示はできますが。

先ずは、本ブログのテーマである「Frontier」のスタイルを確認してみます。

body には、上記のコードが記述されています。先ずは、フォントの種類を変更します。これは、色々と個人の好みが分かれるところですが、本ブログでは基本的に「【2017年版】これで間違いなし!font-familyのおすすめ設定」を参考にしました。詳細は、リンク先に素晴らしい説明がありますから、そちらを参照されることを推奨します。

さて、次にフォントのサイズですが、「Frontier」では、ベースになるフォントを「13px」としているのですが、一方で「rem」を利用したフォントサイズも指定しています。本ブログでは、基本!?にのとって、ベースラインのフォントサイズも設定することにします。参照したのは「【CSS3】フォントサイズは「rem」で指定するのが最適解。 – ONZE」という投稿記事。

CSSでフォントサイズを指定するとき、通常は「em」、「%」、「px」あたりを使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位が非常に便利なので、その使い方を紹介出典:「【CSS3】フォントサイズは「rem」で指定するのが最適解。 – ONZE」より

先ずは、上記のコードで 13 行目に「font-size: 16px; font-size:1.000rem」とあります。これは「Frontier」では、16px のフォントサイズを基本に考えているということと理解しました。

そこで、body のフォントサイズ(5 行目)を「font-size:16px; font-size:1.000rem;」に書き換えます。結果、下記の通りの記述にしました。4、5 行目が変更した部分になります。

これで、ベースラインが決まりましたら、今後は必要に応じてフォントの種類やサイズを都度変更することにします。ただ、px 単位のフォントサイズを rem 単位に変換するのが結構大変です。そこで、素晴らしいサイトがあることを発見しました。それが「px rem を相互変換|調べるネット」です。このサイトがあれば、変換するサイズが一発で検索することができます。

気楽にコメントして頂けますように!コメントは承認後の公開です。

(必須) スパム対策にご協力下さい。下記、数式を完成してコメント送信して下さい。

Copyright © 2016-2017 by Zero Cool. All rights researved. Frontier Theme