アフィンガー4 フォントサイズ 行間を変更

こんばんは松風です^^

もう1つのブログでアフィンガー4を使ってるのですが、スマホ表示の時のフォントがやたら大きくて見づらい!!!

で、アフィンガー4 ファント サイズ変更 で検索してたのですが、今ってほとんどなくないですか記事?

なのでとりあえずフォント変更は無事に出来たので備忘録として記載しときます。

フォント変更

1日くらいうまくいかなくて悩んだのですが、最後は簡単にできました^^

まずはスマホ表示の時のフォントのサイズですが、私は16pxの行間は31pxにしました。
これは好みになるので、検索して自分好みのサイズを設定して下さい。

ではまず外観テーマエディタに行って下さい。

AFFINGER4 Child: スタイルシート(style.css)が表示されると思いますが、
/*media Queries タブレットサイズ(600px以上)という箇所にフォントのサイズや行間サイズの変更のコードを入れてきます。

入れるコードはこちらになります。

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

数字はお好きなサイズに変更して下さい。コードが間違ってないか、追加CSSで確認してから入れることをおすすめします(やり方は下記に記載してます)
入れるとこんな感じになります

この後ファイルト更新をクリックすれば無事に終了です。

スマホ表示に変化がなかった場合

最初子テーマのスタイルシートにコードを入力しても、スマホでブログを見ると全然フォントの大きさが変わってなかったんです^^;

そんな人も、もしかしたらいるかもなのでその場合私がやったことも書いておきます(*^^*)

コードが間違ってる場合がある。

私がそうだったのですが、間違ったコードを入れてるとフォントサイズも変わらないし、下手するとブログがめちゃくちゃになる場合もあります。なので、コードを確認してから入れて下さい。

それではそのやり方です。
外観カスタマイズ追加CSSをクリックします。

そうすると、CSSを入力できるページになりますのでコピーしたコードを貼り付けます。

ここでエラーが出ていなければ問題ないので、そのままスタイルシートに貼り付けて完了です^^

スポンサーリンク