【STINGER7】記事本文のフォントサイズのカスタマイズ方法

 先日より、ちょこちょこっと「STINGER7」のカスタマイズを始めましたgoziです。

 

最近、歳なのか小さい文字が見にくくなってきましたので、見やすいように記事本文のフォントサイズを変更する方法です。

記事本文のフォントサイズのカスタマイズ方法

カスタマイズというと、ちょっと大げさかも知れませんが、記事本文のフォントサイズの変更方法です。

通常であれば、親テーマのstinger7のstyle.cssを変更すればいいのですが、子テーマstinger7childのstyle.cssを利用して変更します。

stinger7childのstyle.cssに以下のコードを書きます。

/*--------------------------------
各フォント設定
---------------------------------*/
/* 基本の文字 */
p {
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 20px;
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
        /*--------------------------------
	各フォント設定
	---------------------------------*/
	p {
		font-size: 14px;
		line-height: 23px;
		margin-bottom: 20px;
	}
}

上記コードは、stinger7のstyle.cssに書かれているコードになります。

今回は前回のメニュー幅・高さのカスタマイズで書いたコードと同じように、レスポンシブの設定がされているため、通常のpタグのみを変更してもパソコンの表示は変わりません。通常のpタグはサイズ781px以下のタブレット等で適用されます。

@media only screen and (min-width: 781px) {}　以下のpタグを変更することにより、パソコンの表示が変更されます。
当ブログでは以下のコードを書いて使用しています。

/*--------------------------------
	各フォント設定
---------------------------------*/
p {
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 30px;
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
	/*--------------------------------
	各フォント設定
	---------------------------------*/
	p {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 30px;
	}
}

あとがき

いかがでしたでしょうか？

レスポンシブデザインを今まで敬遠しがちだったのですが、理解できれば通常のCSSと変わりありません。

今後もちょこちょこカスタマイズ方法をアップしたいと思います。