レスポンシブテーマでフォントサイズをスマホで小さくパソコンで大きくしてみた

今回CSSをいじる目的

このブログの記事中の文字がパソコンで見てもスマホで見ても14pxぐらいに設定されていたので、スマホはそのままでパソコンで見る場合のみ大きくするのが今回の目的。

使用しているテーマはちょい昔のワードプレスにデフォルトで入っているレスポンシブのtwenty twelve。パソコンやタブレットで読みやすいように文字を大きくしたい。

CSSをいじる前の14pxというフォントサイズは、パソコンで読むと小さすぎて1行あたりの文字数が多くなりすぎた。

そこでCSSの中にあった下記の箇所のfont-sizeを修正。font-size以外の要素もフォントサイズに合わせて修正。フォントサイズの単位はクールなremというのを使った。remはcss内の上の方のhtml要素で定義したフォントサイズから計算した大きさらしい。

.entry-content p{
font-size: 1.0rem;
margin: 0 1.4rem 1.6rem;
line-height: 1.714285714;
letter-spacing:0.04rem;
}

いじった結果……

スマホでも文字が大きくなってしまった!

パソコンで見ると無事フォントが大きくなったが、スマホで見てもフォントサイズが大きくなってしまった。スマホの場合はあまり大きくない方が良いから戻したい。

CSSの下の方に行くと次のような記載があった。ここの{}の中には画面の幅が470pxより大きい場合に適用する要素を書くとのこと。

@media screen and (min-width: 470px) {
・・・
}

上記の決まりを忘れていたから最初に出てきた.entry-content pのフォントサイズをいじって大きくしてしまったが、そこには画面が470px以下の場合の数値を書かなければならなかった。

そこでこの場所を下記のように修正。

@media screen and (min-width: 470px) {
.entry-content p{
font-size: 1.2rem;
margin: 0 1.4rem 2.1rem;
line-height: 1.714285714;
letter-spacing:0.04rem;
border:solid 0px #000;
}
}

最初に出てきた.entry-content pのfont-sizeの数値を小さくして、@media screen and (min-width: 470px){}の中に書いた方の数値を大きくすれば、無事スマホで見たときの文字の大きさが小さくなり、パソコン・タブレットで見たときに大きくなった。

数値は各自で設定しよう

font-sizeや他の要素の数値は、各自で自分のサイトに合うように修正してほしい。font-sizeがpxとremの二段になっている場合があるが、これはpxの記述はremに対応していない古いブラウザ用の数値だそうだ。

ヘッダなど他にもスマホとパソコンで大きさを変えたいものは同じように処理するよ良いだろう。いじる前に現行ファイルのバックアップを忘れずに!

スポンサーリンク


広告
広告