Wordpress関連

【AFFINGER4】スマホ表示の時だけフォントサイズを変える方法

タイトルの通り、AFFINGER4でスマホ表示の時だけフォントサイズを変える方法について。

AFFINGER4はデフォルトではちょっと大きいんですよね。

大きな画面のPC表示であればいいんですけど、小さな画面のスマートフォンではちょっと大き過ぎるかなという印象です。

フォント比較

左が変更前、右が変更後になります。

スマホでは文字が少し小さ目の方が、読む人も目に入ってくる文字数も多くて、さらさらっと読みやすいんじゃないかなと思うんですよね。

ただ、あまり小さ過ぎると字が見えないという問題も出てくるので、これくらいがいいのかなと。

 

肝心のカスタマイズですが超簡単です。

以下をスタイルシート(style.css)に記述するだけです。

(スタイルシートは、外観 > テーマの編集 を選べば開けます)

@media only screen and (max-width: 959px)の箇所がポイント。

これはスマホ表示を指定しているわけではなくて、「表示幅が959px以下の場合は以下のパラメータを使用する」という意味ですね。

この指定だとタブレットなんかでも反映しているかもしれません。要は表示するサイズ次第です。

 

どこのフォントサイズを変更するかの指定は、上記の「/*」で囲っているコメントを見てもらえればわかるかと。

そのコメント部分にそれぞれの指定が記入されています。

不要な箇所は削除すればオッケーです。

 

サイズ調整については、18行目のfont-size: 15pxの箇所で出来ます。

僕は15pxにしました。今スマホで見てもらっていれば、そのサイズが15pxですね。

 

わからなければ、まずは上記をそのまま貼り付ければオッケーです。

細かいことは、その後に微調整してもいいかもしれませんね。

ABOUT ME
Taka
既婚/サラリーマン/投資/ゲーム もうすぐサラリーマンを辞めます。家族もローンも抱えていますが、サラリーマンでなくても生活していけることを証明することをテーマとし、ブログを書いています。人生のキーワードはNRP(悔いのない人生)です(造語)2018-01-07