MENU
  1. ホーム
  2. WordPress
  3. WordPressで行間を自在に調整！改行・段落・スペースの違いも徹底解説！

WordPressで行間を自在に調整！改行・段落・スペースの違いも徹底解説！

広告
WordPress　行間

「文章の行間がバラバラで読みづらい……」
「スマホだと詰まりすぎて目が疲れる！」
「サイト全体のデザインは気に入ってるけど、テキストだけどうにも間延びして見える……」

こんな悩みを抱えていませんか？

  • 「改行したはずなのに行間が広がりすぎる」
  • 「Shift＋EnterとEnterの違いがわからず、HTMLが乱れてしまう」
  • 「CSSをいじる勇気はないけれど、もう少し調整したい」

実際にブログ記事を公開してみると、行間ひとつで印象がガラリと変わり、読者の離脱率や滞在時間にも大きな影響を与えます。

本記事では、初心者の方にもわかりやすいように 改行・段落・スペースの違い を整理し、Gutenbergの設定からCSSカスタマイズまで、段階を追って丁寧に解説します。

今日からすぐ試せるテクニック満載で、あなたのサイトをグッと読みやすく、プロっぽく仕上げましょう！

目次

行間がもたらす効果とメリット

読みやすさ向上と読者の離脱防止

適切な行間は、文章をスムーズに読み進められるようにサポートします。

行間が狭すぎると行同士が詰まり、狭すぎる文字列の塊に見えてしまい、読むのが疲れてしまいます。

逆に広すぎると、行から行への視線移動に時間がかかり、文章の一体感が失われます。

  • メリット１：視線のガイド
    行間が整っていると、自然に次の行へ視線が移動し、読み疲れを軽減✨
  • メリット２：情報のまとまりが分かりやすい
    適度な余白があることで、段落や箇条書きなどの区切りがはっきりし、要点が頭に入りやすくなります💡
スクロールできます
行間設定読みやすさ離脱率の傾向
狭すぎる★☆☆☆☆高い
標準★★★★☆低い
広すぎる★★☆☆☆やや上昇

ポイント
初心者の方はまずline‑heightを「1.5倍程度」に設定し、実際にスマホ・PCで見比べながら微調整すると失敗が少ないです。

滞在時間・収益アップへの影響

行間を最適化すると、サイトへの滞在時間が延びることで、広告クリック率や購入行動にも良い影響を与えます。

読みやすいコンテンツは最後まで読まれやすく、ページ下部のCTA（Call To Action）までしっかり届けられます。

  • 効果１：ページ滞在時間の増加 ⏰
    読みやすいテキストはスクロール率を高め、ユーザーがより多くのコンテンツを消費します。
  • 効果２：広告収益／コンバージョン率向上 💰
    最後まで読み進めたユーザーは、バナー広告やリンクをクリックしてくれる可能性がアップ！
スクロールできます
指標行間改善前行間改善後
平均滞在時間1分20秒2分05秒
ページCTR1.8%2.7%
購入CVR0.5%0.8%

ヒント
行間だけでなく、「段落間マージン」や「見出し下余白」も併せて調整することで、さらに読みやすさと収益性が向上します。ぜひお試しください！

改行・段落・スペースの違いを整理

単一行改行（Shift＋Enter）とは

単一行改行は、Shift＋Enter を押すことで同じ段落内に“ソフト改行”を挿入します。

  • 特徴
    • 段落タグ <p> は開いたまま、行だけが切り替わる
    • 本文の途中で改行したいときに使う
  • 使いどころ
    • 箇条書き中の改行
    • セリフや詩のように、段落区切りせず行をそろえたい場面

Tip:
見た目だけでなくHTML構造上も同一段落なので、SEOやデザイン崩れの心配が少ないです😊

段落区切り（Enter）の挙動

通常の Enter は“段落区切り”として認識され、新しい段落を生成します。

  • 特徴
    • 前後に <p> タグが自動で付与される
    • 段落ごとに上下に余白（デフォルトのマージン）が入る
  • 使いどころ
    • 本文の論理的なまとまりを分ける
    • 新しいトピックや話題に移るとき

注意:
テーマやプラグインによって段落マージン量が異なるため、デザインに合わせて調整しましょう🔧

段落間の余白（マージン）と行間の線引き

段落間の余白（マージン）と行間（行の高さ）は、どちらも文字周りのスペースですが、役割と適用範囲が異なります。

スクロールできます
種類適用範囲CSSプロパティ主な役割
行間行と行の間line-height同一段落内での読みやすさ調整
段落間余白段落と段落の間margin-top・margin-bottom論理的区切りの視覚化
  • line-height
    • テキストの 縦方向の余白 を制御
    • 一文が何行にもわたる場合の読みやすさに直結
  • margin-bottom/top
    • 段落同士の ブロック間隔 を調整
    • 見出しや次のコンテンツと段落を分けたいときに活用

ワンポイント✨
両者を組み合わせて最適化することで、文章が「詰まりすぎず」「間延びしすぎず」バランスの取れた見た目になります。まずは line-height: 1.5; と margin-bottom: 1em; を目安に試してみてください！

行間を構成する３大要素

CSS margin・paddingの調整

段落同士のスペースを調整するには、CSSのmarginやpaddingを使います。

  • margin-bottom/top
    • 段落ブロック（<p>）の上下に余白を追加
    • 例：
    p { margin-bottom: 1.2em; /* 段落間隔を1.2文字分に */ }
  • padding
    • 要素の内側に余白を設定
    • 見出しやリストなど、周囲との距離を広げたい場合に有効😊
スクロールできます
プロパティ用途単位例
margin-bottom: 1em段落下の空白を設定em/px/%
padding-top: 0.5em要素上部の内側余白を設定em/px

ポイント

  • %は親要素に対する割合で、emはフォントサイズ基準。
  • まずはmargin-bottom: 1em;から始め、見た目を確認しながら微調整しましょう。

line‑heightプロパティの指定

行と行の間隔を直接コントロールするのがline-heightです。

  • 数値のみ（例：1.6）
    • フォントサイズに対する倍率
    • テキストサイズが変わっても比率は一定
  • 単位付き（例：24px）
    • 絶対値の行間を指定
    • デザインに厳密さが求められるときに使う
body {
  font-size: 16px;
  line-height: 1.6; /* 推奨：1.4～1.8の範囲で調整 */
}

おすすめ設定

  • 日本語サイトは1.5倍前後が読みやすいとされています✨
  • 見出し部分は行数が少ないため、少し狭め（1.2～1.3倍）にしてもOK。

「スペーサー」ブロックによる空き挿入

Gutenberg（ブロックエディタ）には「スペーサー」ブロックがあり、直感的に余白を挿入できます。

  1. ブロック追加 → 「スペーサー」
  2. 右サイドバーで 高さ（px） をスライド調整
  3. 好みの位置にドラッグ＆ドロップ
  • メリット
    • コード不要で誰でも簡単🎉
    • セクションごとに異なる余白を素早く設定
スクロールできます
操作説明
高さ設定px単位で細かく調整
レスポンシブ対応テーマによっては各デバイス別設定可

ワンポイント

  • テーマやプラグインによってはスペーサーの最小/最大値が決まっている場合があります。
  • 多用するとHTMLが肥大化するため、「margin」「line-height」との併用がおすすめです。

ブロックエディタ内での手軽な設定

タイポグラフィ設定で文字間と行間を変更

ブロックエディタでは、段落や見出しブロックを選択した状態でサイドバーの「タイポグラフィ」パネルから、行間（line‑height）や文字間（letter‑spacing）を調整できます。

  1. 対象の段落ブロックをクリック
  2. 画面右側のサイドバーで「タイポグラフィ」を開く
  3. 「行間」スライダーを動かして好みの余白に調整
  4. 必要に応じて「文字間」も調整して、読みやすさを最適化
スクロールできます
設定項目効果推奨値
行間（line‑height）文章の縦方向スペースを増減1.4～1.6 倍
文字間（letter‑spacing）文字同士の横の隙間を調整0.02em～0.05em程度

ポイント⭐

  • スマホ画面でも確認し、狭すぎ・広すぎがないかチェック！
  • 見出しには少し狭めの行間を設定すると、タイトルがキリッと見えます。

ショートカットを使った改行方法

エディタ上での行の切り替えにはショートカットが便利です。

  • Shift＋Enter
    • ソフト改行 を挿入し、同一段落内で行だけを折り返す
    • 箇条書きやキャプションなど、段落タグを増やさずに改行したい場面で使う😉
  • Enter
    • 段落区切り として新しい <p> を生成
    • 見た目の余白も自動で入るため、本文のまとまりを分けるときに最適
例： 
こんにちは。＜Shift＋Enter＞
今日はWordPressの行間設定を学びましょう。

再利用ブロックで共通スペーシングを適用

似た余白設定を複数箇所で使う場合、再利用ブロックを活用すると効率的です。

  1. スペーサーやカスタム段落ブロックを作成
  2. ブロック右上のメニューから「再利用ブロックに追加」を選択
  3. 任意の名前（例：標準スペース）を付けて保存
  4. 想定箇所で「再利用ブロックを追加」から呼び出す
スクロールできます
利点説明
一括変更が可能再利用ブロック側の設定を変えれば、全箇所に反映
作業時間短縮毎回同じ余白を設定する手間をカット
管理がシンプルになるブロック一覧から再利用ブロックを一元管理

Tip✨

  • テーマをアップデートした際も、再利用ブロックの設定を確認しておけばデザイン崩れを最小化できます。
  • 名前に「PC用」「SP用」など端末別を含めると、レスポンシブ調整も楽になります。

CSSカスタマイズで細かなコントロール

子テーマ／追加CSSでコードを書き足す

WordPressの「外観 > カスタマイズ > 追加CSS」や、子テーマのstyle.cssに直接コードを記述する方法です。

初心者でもコードの編集権限さえあれば、細かく調整できるのが魅力✨

/* 段落の行間を1.6倍に設定 */
p {
  line-height: 1.6;
}

/* 段落間マージンを1.4emに */
p + p {
  margin-top: 1.4em;
}
スクロールできます
設定箇所利点注意点
追加CSSすぐ反映され、コード管理がシンプルテーマ更新で消えないよう注意
子テーマstyle.cssテーマ全体を安全にカスタマイズ可能子テーマの作成が必要

ポイント⭐

  • テスト環境で試してから本番に反映すると安心です。
  • CSSは上から順に読み込まれるので、最後の方に追記しましょう。

プラグイン経由でスタイルを上書き

コード編集に不安がある場合は、専用プラグインを利用してGUI上でCSSを追加・編集できます。

代表的なプラグイン例：

  • Simple Custom CSS
    • 管理画面に専用エディタが追加され、リアルタイムプレビュー
  • CSS Hero
    • 視覚的に要素をクリック⇒編集できる「WYSIWYG」機能付き
スクロールできます
プラグイン名特長無料/有料
Simple Custom CSS軽量で導入が簡単無料
CSS Hero細部まで直感的にカスタマイズ可能有料（月額または買い切り）

Tip😉
プラグインを増やしすぎるとサイトが重くなるので、必要最小限に抑えましょう。

見出し上・下の余白を個別調整

見出し（h1～h6）は本文よりも視認性を高めたい重要要素。上下の余白を個別に変えることで、メリハリのあるデザインに🌟

/* h2の前後マージンを調整 */
h2 {
  margin-top: 1.8em;
  margin-bottom: 0.8em;
}

/* h3の余白を少し狭く */
h3 {
  margin-top: 1.4em;
  margin-bottom: 0.6em;
}
スクロールできます
見出しタグ上余白目安下余白目安
h21.8 em0.8 em
h31.4 em0.6 em
h41.2 em0.5 em

ワンポイント✨

  • 同じ見出しタグでも、セクションの文脈に合わせて個別調整すると、読み手に優しいレイアウトになります。
  • ブラウザの検証ツール（DevTools）でリアルタイムに値を試してみると効率的です。

テーマ別の専用オプション活用例

SWELL：ブロック下余白設定機能

SWELLテーマには、各ブロックの下部余白をGUIで簡単に調整できる専用オプションがあります。

管理画面の「外観 > カスタマイズ > 投稿・固定ページ設定 > ブロック下の余白量」で数値をスライダー操作するだけで、ページ全体の統一感を保ちながら行間や段落間を最適化できます😊

スクロールできます
設定項目説明推奨値の目安
デフォルト余白量ブロック直後の一律マージン（px）24～32px
見出しブロック下余白見出しと本文の間隔を個別調整16～24px
段落ブロック下余白通常テキスト間のスペース20～28px

ポイント⭐

  • 設定後は必ずスマホ表示もチェックして、余白が大きすぎ・小さすぎないか確認しましょう。
  • ブロックタイプごとに細かく設定できるので、セクションごとにメリハリをつけられます。
あわせて読みたい
大人気WordPressテーマ『SWELL』完全ガイド！主な機能、口コミ・評判など徹底解説！ WordPressのテーマ選びに頭を悩ませているあなたへ。 「SWELLって本当に初心者でも使いやすいの？」「デザインの自由度は他と比べてどれくらい高いの？」「表示速度やSE…

Xeory：base.cssを直接編集

Xeoryシリーズでは、行間や段落間を調整する際にテーマのbase.cssを直接編集する方法が定番です。

子テーマを作成して以下のようにコードを追記すると、サイト全体に反映できます✨

/* 基本文字の行間を1.6倍に */
.entry-content {
  line-height: 1.6;
}

/* 段落間の上下マージンを調整 */
.entry-content p + p {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}
スクロールできます
編集箇所説明注意点
.entry-content投稿・固定ページのメインコンテンツ範囲他のCSSと競合しないよう順序に注意
p + p セレクタ連続する段落同士の隙間をまとめて調整レイアウト崩れがないか要チェック

ワンポイント✨

  • 本番環境に反映する前に、ブラウザのDevToolsでリアルタイムに調整して値を確かめると安心です。
  • テーマアップデートでbase.cssが上書きされないよう、必ず子テーマか追加CSSを併用してください。

よくある疑問と対処法

line‑heightとmargin‑bottomは何が違う？

line-heightとmargin-bottomは、いずれもテキスト周りの余白を制御しますが、適用範囲と目的が異なります。

スクロールできます
プロパティ適用範囲主な役割備考
line-height行と行の間同一段落内の縦方向スペースを調整文の可読性向上に直結✨
margin-bottom段落ブロック同士段落と段落の間隔を空ける論理的区切りを視覚化🎯
  • line-height
    • テキスト行のベースライン間隔を設定
    • 例：line-height: 1.6;（フォントサイズ×1.6倍のスペース）
  • margin-bottom
    • <p>などブロック要素の下に余白を追加
    • 例：p { margin-bottom: 1.2em; }（段落間を1.2文字分空ける）

ワンポイント

  • 読みやすい日本語サイトでは、line-height: 1.5～1.8 が定番。
  • 論理構造をはっきり見せたい場合は、margin-bottomで段落間の余白を調整しましょう😊

「追加CSS」でエラーが出る原因と解決策

主なエラー原因とチェックポイント

  1. 文法ミス（セミコロン忘れ、波かっこ不整合）
    • ;が抜けている／{}の数が合わない
  2. 無効なプロパティ名・値
    • 存在しないCSSプロパティやスペルミス
  3. セレクタの競合・優先順位
    • 他のCSSが強く適用されて上書きされる
  4. キャッシュの影響
    • ブラウザやキャッシュプラグインに古いスタイルが残存

解決策

  • 文法チェック
    • コードエディタのシンタックスハイライトを活用して、赤波線やエラー表示を確認🔍
  • ブラウザのDevToolsで検証
    • 変更したい要素を右クリック → 「検証」 → Stylesタブでリアルタイム編集
  • セレクタの優先度を調整
    • 必要なら!importantを最小限で使用（例：line-height:1.6 !important;）
  • キャッシュクリア
    • ブラウザキャッシュのリロード（Ctrl＋F5）
    • キャッシュプラグインのクリアボタンを押す🧹

ヒント✨

  • 小さな変更を1つずつ反映して動作を確認すると、どの行でエラーが起きたか特定しやすいです。
  • 複数箇所で同じエラーが出る場合は、テーマやプラグインのCSSファイルに問題が潜んでいることもあります。

ベストプラクティス

  • 全体の基本設定
    • まずは line-height: 1.5、margin-bottom: 1em を目安にスタートし、サイト全体を統一✨
    • テーマやフォントサイズによって見え方が変わるので、PC・スマホ両方で必ず確認しましょう📱💻
  • スペースのバランス
    • 行間（line‑height）は「可読性」に直結。狭すぎず広すぎず、1.4～1.6倍をキープ
    • 段落間余白（margin）は「論理的区切り」を強調。1em～1.4emで整える
  • 再利用性と管理のしやすさ
    • 子テーマまたは「追加CSS」でコードを一元管理し、テーマアップデートの影響を防止✅
    • 再利用ブロックやプラグインを活用して、同じ余白設定を複数箇所へ効率的に適用
  • テーマ固有オプションの活用
    • SWELLなどはGUIでブロック余白を操作できる機能を使いこなし、作業時間を短縮🎉
    • Xeoryは base.css で一括調整し、サイト全体の統一感を演出
  • テスト＆調整のサイクル
    • 小さな値変更→表示チェック→微調整 のPDCAを回すことで、最適解に近づきます🔄
    • ブラウザのDevToolsでリアルタイム編集を試し、最終的に本番CSSへ反映すると安心
スクロールできます
項目推奨設定
行間 (line‑height)1.4 ～ 1.6 倍
段落間余白 (margin)1em ～ 1.4em
見出し下余白0.6em ～ 1em （見出しレベルに応じて）
スペーサー高さ20px ～ 32px

最後にひと言
綺麗な行間はサイトの“読みやすさ”と“信頼感”を高め、結果的にユーザー満足度や収益アップにもつながります。ぜひ今日から細かなスペースも意識してみてください😊

まとめ

本記事では、

  1. 改行（Shift＋Enter）と段落（Enter）の使い分け
  2. line‑height／margin／スペーサーブロック という３つの行間要素
  3. ブロックエディタ＆CSSカスタマイズの手順
  4. SWELLやXeoryなどテーマ別の設定ポイント
  5. よくある疑問の解消法

をお伝えしました。

これらを組み合わせることで、読みやすさはもちろん、サイト全体の統一感や収益性アップにもつながります。

ぜひまずは line‑height:1.5／margin-bottom:1em を目安に設定し、スマホ・PC両方でチェックしてみてください。

少しの調整が、読者体験を大きく変える一歩です。

あなたのWordPressサイトが、ますます魅力的になることを願っています😊

WordPress

関連記事

目次