WordPressでテキストの行間を変更する方法

適切な行間は美的な要素だけでなく、可読性、ユーザーエクスペリエンス、さらには訪問者がコンテンツとどのように関わるかにも直接影響します。個人ブログを運営している場合でも、高トラフィックの商業ウェブサイトを管理している場合でも、WordPressでテキストの間隔を最適化することで、サイトの視覚的な構造を大幅に向上させることができます。

このガイドでは、コーディングの有無にかかわらず、クラシックエディターとブロックエディター（Gutenberg）の両方を使用して、WordPressで行間を変更する最も効果的な方法を説明します。また、カスタムCSSを適用し、一般的なフォーマットの問題をトラブルシューティングする方法も学びます。

行間が重要な理由

• 可読性の向上 — 特にモバイルで
• 長文をスキャンしやすくすることでバウンス率を低下させる
• テーマやデバイス間でデザインの一貫性を向上させる
• SEOのベストプラクティスに沿う（明確で構造化されたコンテンツ = より良いエンゲージメント）

それでは、行間を制御する方法を見ていきましょう。

方法1: Gutenbergエディターでの行間の調整

デフォルトのブロックエディター（Gutenberg）では、「段落」ブロックの設定やカスタムCSSクラスを使用して行間を管理できます。

➤ 手順:

• WordPressエディターで投稿またはページを開きます。
• 段落ブロックを選択します。
• 右のサイドバーで、タイポグラフィ > 行の高さオプションを見つけます。
• 値を調整します（例: 1.6, 2, 2.2）。

注: オプションが利用できない場合は、下記のカスタムCSS（方法3）に進んでください。

方法2: クラシックエディター（TinyMCE）

クラシックエディターには直接的な行の高さオプションは含まれていませんが、次のことができます。

• Shift+Enterを使用して手動で改行します（間隔なし）
• TinyMCE Advanced（現在は「Advanced Editor Tools」の一部）などのプラグインを使用して間隔コントロールを追加します

一貫したスタイリングのために、CSSを介して行の高さを設定することをお勧めします。

方法3: カスタムCSS（完全な制御のためのベストプラクティス）

この方法は正確な制御を提供し、すべてのブロックやテーマで機能し、レイアウトのシフトを回避します。

例1: すべての段落に対するグローバルな行の高さ

p {
  line-height: 1.8;
}

例2: 特定のクラスのみに適用

.custom-text {
  line-height: 2.2;
}

CSSを挿入する場所:

• 外観 → カスタマイズ → 追加CSS、または
• 子テーマのstyle.css内、または
• Simple Custom CSSのようなプラグインを通じて

方法4: ページビルダー（Elementor、WPBakeryなど）

Elementorの場合:

• セクションまたはテキストウィジェットを編集します。
• スタイル → タイポグラフィの下で、行の高さフィールドを調整します。
• em、px、または相対単位で設定できます。

WPBakeryの場合:

• デザインオプションを使用するか、行または列設定に直接カスタムCSSを追加します。

方法5: モバイル対応の行間

• デスクトップでの良い行間は、モバイルでは窮屈に見えることがあります。ほとんどのエディター（GutenbergやElementorを含む）はレスポンシブ設定を許可します。常に:
• タブレットとモバイルで変更をプレビューする
• 小さな画面用にわずかに大きな行の高さを設定する（例: 1.6の代わりに2）
• 一般的な問題と修正

CSS更新後に行の高さが変わらない？

• テーマやプラグインがスタイルを上書きしていないことを確認してください。
• CSSルールに!importantを使用してみてください:

p {
  line-height: 2 !important;
}

カスタマイザーで変更が見えるが、ライブでは見えない？

• サイトキャッシュとブラウザキャッシュをクリアしてください。
• キャッシングプラグインを使用している場合は、すべてのキャッシュをパージしてください。

まとめ