ワードプレス文字サイズと行間を調整する方法-追加CSSで超簡単

2025-04-04
| No Comments
1.jpeg

Last Updated on 04-04-25 by Shinichi

ほぼすべてのワードプレスのテーマで実現可能な文字サイズと行間の調整方法を紹介します。ブログやサイトを運営していると、「文字サイズを少し大きくしたい」「行間を広げて読みやすくしたい」と感じることはありませんか？この記事では、追加CSSを使って文字サイズや行間を簡単にカスタマイズする方法をわかりやすく解説します。特別なプラグインを使用せず、テーマに依存しない基本操作で実現できるので、ぜひ挑戦してみてください！コピペで大丈夫です。 こちらのYouTubeも参考になります。

ワードプレスの追加CSSとは？特別なプラグイン必要なし

追加CSSは、WordPressのほぼすべてのテーマに組み込まれているカスタマイズ機能の一つで、独自のスタイル（デザイン）を追加するために使用します。この機能を活用すれば、テーマのコードを直接編集する必要がなく、安全にカスタマイズが可能です。私が使用しているCorporate Liteテーマでは、本来あるべき設定オプションが見当たらないことが多く、他の方が紹介している方法が使えない場合がしばしばあります。また、サイト制作初心者として、テーマのソースコード編集に不安を感じることも。最近では専ら追加CSSを使って調整を行っています。

ワードプレスで文字サイズと行間を調整する手順

1. 管理画面にログインする

まず、WordPressの管理画面にログインします。

2. カスタマイザーを開く

  1. 左側メニューの「外観」→「カスタマイズ」をクリックします。
  2. 「カスタマイズ」画面が開いたら、左側メニューの中に「追加CSS」という項目を探してクリックします。

3. CSSコードを追加する

以下のCSSコードを追加CSSの入力欄にコピペしてください。

コード例: 記事本文の文字サイズと行間を調整

/* 記事本文の文字サイズと行間を調整 */
.entry-content {
    font-size: 18px; /* 文字サイズを18pxに設定 */
    line-height: 1.8; /* 行間を1.8倍に設定 */
}

/* 見出しのフォントサイズを調整 */
.entry-content h1 {
    font-size: 32px; /* 見出し1の文字サイズ */
}
.entry-content h2 {
    font-size: 28px; /* 見出し2の文字サイズ */
}
.entry-content h3 {
    font-size: 24px; /* 見出し3の文字サイズ */
}

ポイント解説

  • .entry-content は、記事本文のエリアを指定するクラスです。テーマによって異なる場合があるので注意してください。
  • font-size は文字サイズを指定します。単位は px（ピクセル）または rem などが使えます。
  • line-height は行間を指定します。数値が大きいほど行間が広がります。

4. CSSを保存する

入力が完了したら、画面右上にある「公開」ボタンをクリックして変更を保存します。

5. サイトを確認する

サイトを開いて変更が反映されているか確認しましょう。必要に応じて、CSSの数値を調整してみてください。

記事の一部だけや特定の記事だけで調整する方法

WordPressのCSSカスタマイズは、柔軟性が高く、サイト全体や特定のエリアに適用できます。以下にいくつかの具体的な方法を解説します。

1. 記事の一部にだけ適用する方法

場合によっては、記事の一部や特定のセクションだけにカスタマイズを適用したいことがあります。これを実現するには、カスタムクラスを使う方法が便利です。

例: 特定のセクションにカスタムクラスを適用

  1. WordPressのエディターで、対象のセクションにカスタムクラス名を追加します。
    • ブロックエディターの場合: 「ブロック」設定サイドバーの「高度な設定」でカスタムCSSクラスを指定します。
  2. 追加CSSに以下のコードを記述します。
/* カスタムクラス "highlight-section" に適用 */
.highlight-section {
    font-size: 20px;
    line-height: 2;
    background-color: #f9f9f9; /* 背景色を変更 */
    padding: 10px; /* 余白を追加 */
}

この方法を使えば、特定のセクションだけにスタイルを適用でき、他の部分への影響を避けることができます。

2. 特定のページや投稿だけに適用する

特定のページや投稿にのみ適用したい場合は、WordPressの投稿IDやページIDを使う方法があります。

例: 特定の投稿（IDが123）に適用

/* 投稿ID 123 のみ適用 */
.postid-123 .entry-content {
    font-size: 20px;
    line-height: 2;
}

3. モバイル対応（レスポンシブデザイン）

モバイルデバイスで表示される際に文字サイズや行間を調整したい場合は、メディアクエリを使います。

例: モバイル向けの調整

/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
    .entry-content {
        font-size: 16px;
        line-height: 1.6;
    }
}

注意点

  1. テーマの仕様を確認する テーマによっては、.entry-content 以外のクラス名が使われていることがあります。ブラウザの開発ツール（F12キー）を使ってHTML構造を確認しましょう。
  2. 保存を忘れない CSSを編集した後は、必ず「公開」ボタンを押して保存してください。
  3. 変更が反映されない場合 キャッシュが原因で変更が反映されないことがあります。ブラウザのキャッシュをクリアするか、キャッシュ系プラグインを使っている場合は設定を確認してください。

文字サイズと行間を追加CSS調整する方法　まとめ

追加CSSを使えば、WordPressサイトの文字サイズや行間を簡単に調整できます。この記事で紹介した方法を使って、自分のサイトをより見やすくデザインしてみてください。

デザインに迷ったときは、文字サイズを「16-18px」、行間を「1.6-1.8」に設定すると、多くのユーザーにとって快適な読みやすさを提供できます。ぜひ、この記事を参考に自分好みのスタイルを作り上げてみてください！

ワードプレス関連記事

📌ワードプレスでロゴのサイズと位置の変更―追加CSS設定で超簡単
📌ワードプレスで文字色の変更-追加CSSで超簡単
📌ワードプレスで記事タイトルの行間を調整する方法-追加CSSで超簡単-
📌【HTML初心者向け】アフィリエイトリンク画像を左・中央・右揃えにする方法
📌ワードプレスの子テーマの作り方 – 初心者が最後に辿り着いた方法
📌もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法

Web Creation