LightningテーマとCocoonテーマの文字の大きさを変更する方法

WordPressテーマ「Lightning」では、記事本文や見出しの文字サイズがテーマ側で設定されています。
デフォルトのサイズだと読みづらい場合、CSSを使って自由に変更することが可能です。
本記事では、本文・見出し・スマホ向けも含めた最適化方法を解説します。

1 Lightningテーマの文字サイズを変更する

/* -----------------------------
 * Lightning用 記事本文文字サイズ調整
 * ----------------------------- */

/* 記事本文全体の文字サイズと行間 */
.entry-body,
.entry-content {
    font-size: 1em;       /* 標準サイズを基準に調整 */
    line-height: 1.8em;   /* 行間も相対値で調整 */
}

/* 見出し h2 のサイズと下マージン */
.entry-content h2 {
    font-size: 1.375em;   /* 約22px相当 */
    margin-bottom: 1em;   /* 下に余白を設定 */
}

/* 見出し h3 のサイズと下マージン */
.entry-content h3 {
    font-size: 1.125em;   /* 約18px相当 */
    margin-bottom: 0.8em; /* 下に余白を設定 */
}

/* 見出し h4 のサイズと下マージン */
.entry-content h4 {
    font-size: 1em;       /* 約16px相当 */
    margin-bottom: 0.6em; /* 下に余白を設定 */
}

/* -----------------------------
 * スマホ向け文字サイズ・行間調整
 * ----------------------------- */

@media screen and (max-width: 768px) {
    .entry-body,
    .entry-content {
        font-size: 0.875em;   /* 約14px相当 */
        line-height: 1.6em;   /* 行間を少し詰める */
    }
    .entry-content h2 {
        font-size: 1.25em;    /* 約20px相当 */
    }
    .entry-content h3 {
        font-size: 1em;       /* 約16px相当 */
    }
    .entry-content h4 {
        font-size: 0.875em;   /* 約14px相当 */
    }
}

  

2 Cocoonテーマの文字サイズを変更する

/* -----------------------------
 * Cocoon用 記事本文文字サイズ調整
 * ----------------------------- */

/* 記事本文全体の文字サイズと行間 */
.entry-content,
.post-content {
    font-size: 16px;    /* 標準文字サイズを16pxに設定 */
    line-height: 1.8;   /* 行間を1.8倍に設定 */
}

/* 見出し h2 のサイズと下マージン */
.entry-content h2,
.post-content h2 {
    font-size: 22px;    /* h2文字サイズを22pxに設定 */
    margin-bottom: 1em; /* 下に余白を設定 */
}

/* 見出し h3 のサイズと下マージン */
.entry-content h3,
.post-content h3 {
    font-size: 18px;    /* h3文字サイズを18pxに設定 */
    margin-bottom: 0.8em; /* 下に余白を設定 */
}

/* -----------------------------
 * スマホ向け文字サイズ・行間調整
 * ----------------------------- */

@media screen and (max-width: 768px) {
    .entry-content,
    .post-content {
        font-size: 14px;   /* スマホは文字サイズを14pxに縮小 */
        line-height: 1.6;  /* 行間を少し詰める */
    }
    .entry-content h2,
    .post-content h2 {
        font-size: 20px;   /* スマホ用 h2 の文字サイズを20pxに */
    }
}
   

3 追加方法

上記のCSSは、子テーマの style.css に追加するか、「外観」→「カスタマイズ」→「追加CSS」に貼り付けてください。
これだけで本文・見出し・スマホ表示まで調整可能です。

4 まとめ

Lightningテーマの文字サイズを変更することで、読みやすさが格段に向上します。
スマホ対応まで含めて調整しておくと、PCでもスマホでも統一感のある記事表示が可能です。