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

  • このトピックには7件の返信、2人の参加者があり、最後にタテキョーヤにより7年、 7ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #2035
      タテキョーヤ
      ゲスト

      私はワードプレスでブログを立ち上げたばかりで、
      CSSなどのカスタム面を苦労しながらも行っております。

      ワードプレスでのデフォルトでは、
      フォントサイズが少し大きめなうえ、
      行間が特に開きすぎています。

      特に、固定ページや記事ページを修正したいですが、
      どのCSSをいじれば良いのか分かりません。

      ワードプレスの「テーマ編集」の
      Style.CSSを見てみましたが、
      line-heightとかを直すのでしょうか?

    • #2041
      わいひら
      キーマスター

      フォントサイズと縦の行間は、以下の数字を好みのものに変更してみてください。

      .article {
          font-size: 16px;
          line-height: 170%;
      }

      あとできれば、子テーマを適用して、子テーマのstyle.cssに上記のスタイルを追記する形でサイズ変更をすれば、のちのちのメンテナンスが楽になると思います。
      子テーマをインストールする方法

    • #2313
      タテキョーヤ
      ゲスト

      遅くなりました。
      子テーマ(child-sidebar-336)を
      有効化した後、
      フォントサイズと行の高さを変えてみましたが、
      行の高さだけやはり変わりませんでした。

      わいひらさんのアドバイスどおり
      親テーマのStyle.cssのarticleの部分の数字だけ
      変えてみましたが、あまり行の高さが縮んでないような気がします。

      (行の高さを100%くらいにしてみました。)

    • #2314
      タテキョーヤ
      ゲスト

      追記です。
      Tiny MCE Advancedの
      「スタイル」⇒「ブロック」⇒「div」で
      文章を書くとうまいこと行間が整いました。

    • #2342
      わいひら
      キーマスター

      そういったpタグ同士の行間の変更でしたら、さらに以下のように書くと調節できます。

      .article  p {
          margin: 5px 0;
      }

      5pxのところを好みの数字に書き換えてください。

    • #2355
      タテキョーヤ
      ゲスト

      それは先ほど上記に記載されていた
      「font-size: 16px;
       line-height: 170%;」の下に
      追加ということでよろしいでしょうか?

    • #2356
      わいひら
      キーマスター

      そうです。書いちゃうとこんな感じ。
      これの数字を好みに調整します。

      .article {
          font-size: 16px;
          line-height: 170%;
      }
      
      .article  p {
          margin: 5px 0;
      }
    • #2357
      タテキョーヤ
      ゲスト

      やっとうまいことできました。
      これで行間とフォントサイズの面では、
      今のところ心配なく書けます。

      ありがとうございます!

      また分からないこと、つまずいたことがあれば、
      お伺いいたします。

      よろしくお願いいたします

7件の返信スレッドを表示中
  • トピック「フォントサイズと行間の変更方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)