フォントサイズと行間の変更方法

PR 2014/9/23

このトピックには7件の返信、2人の参加者があり、最後にタテキョーヤにより11年、 4ヶ月前に更新されました。

7件の返信スレッドを表示中

投稿者

投稿
- 2014年9月18日 10:35 PM #2035
  
  タテキョーヤ
  ゲスト
  
  私はワードプレスでブログを立ち上げたばかりで、
  CSSなどのカスタム面を苦労しながらも行っております。
  
  ワードプレスでのデフォルトでは、
  フォントサイズが少し大きめなうえ、
  行間が特に開きすぎています。
  
  特に、固定ページや記事ページを修正したいですが、
  どのCSSをいじれば良いのか分かりません。
  
  ワードプレスの「テーマ編集」の
  Style.CSSを見てみましたが、
  line-heightとかを直すのでしょうか？
- 2014年9月18日 11:05 PM #2041
  わいひら
  キーマスター
  フォントサイズと縦の行間は、以下の数字を好みのものに変更してみてください。
```
.article {
    font-size: 16px;
    line-height: 170%;
}
```
  あとできれば、子テーマを適用して、子テーマのstyle.cssに上記のスタイルを追記する形でサイズ変更をすれば、のちのちのメンテナンスが楽になると思います。
  子テーマをインストールする方法
- 2014年9月20日 11:38 PM #2313
  
  タテキョーヤ
  ゲスト
  
  遅くなりました。
  子テーマ(child-sidebar-336)を
  有効化した後、
  フォントサイズと行の高さを変えてみましたが、
  行の高さだけやはり変わりませんでした。
  
  わいひらさんのアドバイスどおり
  親テーマのStyle.cssのarticleの部分の数字だけ
  変えてみましたが、あまり行の高さが縮んでないような気がします。
  
  （行の高さを100%くらいにしてみました。）
- 2014年9月21日 12:06 AM #2314
  
  タテキョーヤ
  ゲスト
  
  追記です。
  Tiny MCE Advancedの
  「スタイル」⇒「ブロック」⇒「div」で
  文章を書くとうまいこと行間が整いました。
- 2014年9月21日 10:01 AM #2342
  わいひら
  キーマスター
  そういったpタグ同士の行間の変更でしたら、さらに以下のように書くと調節できます。
```
.article  p {
    margin: 5px 0;
}
```
  5pxのところを好みの数字に書き換えてください。
- 2014年9月21日 11:13 PM #2355
  
  タテキョーヤ
  ゲスト
  
  それは先ほど上記に記載されていた
  「font-size: 16px;
  　line-height: 170%;」の下に
  追加ということでよろしいでしょうか？
- 2014年9月22日 12:02 AM #2356
  わいひら
  キーマスター
  そうです。書いちゃうとこんな感じ。
  これの数字を好みに調整します。
```
.article {
    font-size: 16px;
    line-height: 170%;
}

.article  p {
    margin: 5px 0;
}
```
- 2014年9月22日 12:43 AM #2357
  
  タテキョーヤ
  ゲスト
  
  やっとうまいことできました。
  これで行間とフォントサイズの面では、
  今のところ心配なく書けます。
  
  ありがとうございます！
  
  また分からないこと、つまずいたことがあれば、
  お伺いいたします。
  
  よろしくお願いいたします
投稿者

投稿