ツイッターはこちら

THE SONICで文字サイズを変更する方法【WordPressテーマ】

3 min

THE SONICの文字サイズを変えたいです…。でも、CSSとかわかりません…。

THE SONICの<br>文字サイズを<br>変えたい人

THE SONICの
文字サイズを
変えたい人

フルショ

フルショ

CSSがわからなくてもできるように解説するので、是非活用してください。

THE SONICの標準の文字サイズ【WordPressテーマ】

THE SONICの標準の文字サイズは以下の通り。

h1h2h3h4h5h6pliol
PC27.225.519.891714.1111.39171717
タブレット27.225.519.891714.1111.39171717
スマホ20.420.419.891714.1111.39171717
  • h1・・・タイトル
  • h2〜h6・・・記事の中の見出し
  • p・・・本文
  • li・・・リスト
  • ol・・・番号付きリスト

THE SONICの文字サイズの変更方法【WordPressテーマ】

THE SONICは文書→テキスト設定から文字サイズを簡単に変更することができますが、毎回変更しなければなりませんので、めんどうです。

なので、デフォルトの文字サイズを変更するには、CSSを変更することが必須。

CSSとかわからないよー。という方にも理解できるように説明しますので、以下の手順で文字サイズを変更しましょう。

  1. STEP

    ダッシュボードで、外観→カスタマイズの順で選択

  2. STEP

    追加CSSを選択

  3. STEP

    以下のコードを画像の赤枠にコピペ

    /*PC*/
    .entry h1{
    font-size:px;
    }
    .entry h2{
    font-size:px;
    }
    .entry h3{
    font-size:px;
    }
    .entry h4{
    font-size:px;
    }
    .entry h5{
    font-size:px;
    }
    .entry h6{
    font-size:px;
    }
    .entry p{
    font-size:px;
    }

    /*タブレット*/
    @media (max-width: 1020px) and (min-width: 768px) { 
    .entry h1{
    font-size:px;
    }
    .entry h2{
    font-size:px;
    }
    .entry h3{
    font-size:px;
    }
    .entry h4{
    font-size:px;
    }
    .entry h5{
    font-size:px;
    }
    .entry h6{
    font-size:px;
    }
    .entry p{
    font-size:px;
    }
    }

    /*スマホ*/
    @media screen and (max-width: 767px) {
    .entry h1{
    font-size:px;
    }
    .entry h2{
    font-size:px;
    }
    .entry h3{
    font-size:px;
    }
    .entry h4{
    font-size:px;
    }
    .entry h5{
    font-size:px;
    }
    .entry h6{
    font-size:px;
    }
    .entry p{
    font-size:px;
    }
    }

    画像に alt 属性が指定されていません。ファイル名: image.png
  4. STEP

    PC、タブレット、スマホで自分が指定したい文字サイズを打ち込む

    例えば、以下の文字サイズに指定したいとする。

    h1h2h3h4h5h6p
    PC25252017171717
    タブレット22221816161616
    スマホ18181816161616

    この場合、以下の赤文字のようにコードを打ち込む。

    /*PC*/
    .entry h1{
    font-size:25px;
    }
    .entry h2{
    font-size:25px;
    }
    .entry h3{
    font-size:20px;
    }
    .entry h4{
    font-size:17px;
    }
    .entry h5{
    font-size:17px;
    }
    .entry h6{
    font-size:17px;
    }
    .entry p{
    font-size:17px;
    }

    /*タブレット*/
    @media (max-width: 1020px) and (min-width: 768px) { 
    .entry h1{
    font-size:22px;
    }
    .entry h2{
    font-size:22px;
    }
    .entry h3{
    font-size:16px;
    }
    .entry h4{
    font-size:16px;
    }
    .entry h5{
    font-size:16px;
    }
    .entry h6{
    font-size:16px;
    }
    .entry p{
    font-size:16px;
    }
    }

    /*スマホ*/
    @media screen and (max-width: 767px) {
    .entry h1{
    font-size:18px;
    }
    .entry h2{
    font-size:18px;
    }
    .entry h3{
    font-size:18px;
    }
    .entry h4{
    font-size:16px;
    }
    .entry h5{
    font-size:16px;
    }
    .entry h6{
    font-size:16px;
    }
    .entry p{
    font-size:16px;
    }
    }

    li、olは文字サイズを変更すると、・や①の位置が文字とずれるため、文字サイズは変更しない方が良い

フルショ

フルショ

2019年春に理系大学院を卒業して、大手メーカーに勤める25歳です!
海外ノマドにあこがれて、会社に頼らない生き方を現在模索中。

FOLLOW

カテゴリー:
関連記事