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

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

1. 本文の文字サイズを変更する

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

/* 記事の見出しサイズ調整 */
.entry-content h2 {
    font-size: 1.375em;   /* 約22px相当 */
    margin-bottom: 1em;
}

.entry-content h3 {
    font-size: 1.125em;   /* 約18px相当 */
    margin-bottom: 0.8em;
}

.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相当 */
    }
}

  

4. Cocoon の場合のCSS例

/* Cocoon 記事本文の文字サイズ */
.entry-content,
.post-content {
    font-size: 16px;
    line-height: 1.8;
}

/* Cocoon 見出しサイズ */
.entry-content h2,
.post-content h2 {
    font-size: 22px;
    margin-bottom: 1em;
}
.entry-content h3,
.post-content h3 {
    font-size: 18px;
    margin-bottom: 0.8em;
}

/* スマホ向け調整 */
@media screen and (max-width: 768px) {
    .entry-content,
    .post-content {
        font-size: 14px;
        line-height: 1.6;
    }
    .entry-content h2,
    .post-content h2 {
        font-size: 20px;
    }
}
   

5. 追加方法

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

まとめ

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

スラッグ案: lightning-font-size