STINGER5のフォントの大きさ変更

STINGER5を子テーマで管理しているとき、投稿や固定ページの文字の大きさを変更しようとして少し手間取ってしまいました。そのときのメモです。

ネットで良く見るフォントサイズの変更方法

p {
  font-size: 16px;
  line-height: 30px;
}

このように、style.cssの最後に<p>タグのフォントサイズを指定する方法を良く見かけますが、僕の環境ではうまくいきませんでした。具体的には、次の様な設定を子テーマのstyle.cssに追加してもフォントサイズが変わりませんでした。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: st5_cd
Description: stinger5 child
Template: stinger5ver20141227
---------------------------------------------------------*/
p {
  font-size: 16px;
  line-height: 30px;
}

子テーマのstyle.cssは、テンプレートであるSTINGER5のstyle.cssに対して追加/上書きする設定部分のみを記載しています。この設定で<p>タグのフォントサイズを上書きできそうですが、実際には上書きされません。その理由は、実際にWebページが生成される時に別の設定で上書きされてしまっているからなのですが、ではどうすれば子テーマのstyle.cssの設定だけでフォントサイズを変更できるかを試してみました。成功したのは次の設定です。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: st5_cd
Description: stinger5 child
Template: stinger5ver20141227
---------------------------------------------------------*/
article p {
  font-size: 16px;
  line-height: 30px;
}

このように、<article>タグの下階層の<p>タグという形でフォントサイズを指定すると、期待通りにフォントサイズを変更することができました。正確には、この設定だけでは<ul>タグなどのフォントに変更が反映されていなかったりするのですが、基本的には同様の方法で設定を追加すれば良さそうです。 また、<article>タグの部分を<section>タグとしてもフォントサイズは変更できました。ただし、固定ページの本文は<section>タグで囲まれていないようなので、<section>タグを使った場合には投稿のみに変更が反映されるようです。