WordPressで行間を空ける（詰める）6つの調整方法【SWELL対応】

この記事では、WordPress（ワードプレス）のブロックエディタ（Gutenberg）で行間を開けるやり方を、画像を用いてわかりやすくご紹介します。

行間（余白）が詰めすぎていたり、空きすぎていたりすると、文章が読みづらくなります。

エンター（Enter）するだけで行間を開けることができたクラシックエディタ（Classic Editor）と違い、設定には少しコツがいります。

マニュオン

CSSで全記事の行間を一括変更することもできます。

なるほどくん

なるほど！いろんなやり方があるんですね。

 この記事を書いた人

マニュオン
@suyasite

マニュオン @suyasite

• 「AI Direct Editor」開発者
• 「WP-Search」開発者

• 「AI Direct Editor」開発者
• 「WP-Search」開発者

この記事を最後まで読めば、ブロックエディタ（Gutenberg）で行間を簡単に調節する方法がわかります。

ぜひ最後まで進めてみてください。

＼ 導入するだけ簡単おしゃれ ／

SWELLを見てみる

1) Shift + Enter

記事編集中に、キーボードだけで行間を追加する（一行空ける）ことができます。

空欄を選択して「Shift + Enter」を押します。

マニュオン

これだけで、空白ブロックが消えなくなります。

HTMLをのぞくと、改行タグ <br> が挿入されていることがわかります。

<p><br></p>

このやり方のメリット・デメリットは以下の通りです。

2) スペーサーブロック

記事編集中に、ブロックで行間を追加することができます。

空欄を選択して「/spacer」と入力して[スペーサー]ブロックを選択します。

もしくは、上の[+]ボタンからブロック一覧を開き、[スペーサー]を選択します。

マニュオン

空欄でスラッシュ（/）を入力すると、ブロックを検索できるショートカットが起動します。

スペーサーブロックは、ピクセル（px）単位で高さを設定することができます。

マニュオン

いつも同じ高さのスペーサーを使いたいなら、再利用ブロックに保存しましょう。

HTMLをのぞくと、コンテナータグ <div> が挿入されていることがわかります。

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

このやり方のメリット・デメリットは以下の通りです。

3) 再利用ブロック

記事編集中に、オリジナルの余白（行間）ブロックを追加することができます。

スペーサーブロックなどを使った余白ブロックを一度作成して、再利用ブロックに保存すれば使い回すことができます。

再利用ブロックを作成する方法

高さを調整したスペーサーブロックなどを選択して、[オプション]ボタンから[再利用ブロックに追加]をクリックします。

再利用ブロックに検索しやすい名前をつけて[保存]をクリックします。

日本語だと「/（スラッシュ）」の後に入力変換する必要があるため、英語で名前をつけるのがおすすめです。

再利用ブロックを利用する方法

ショートカット検索

空欄を選択して「/（スラッシュ）」から再利用ブロックを検索して利用します。

通常検索

空欄を選択して「＋」ボタンから再利用ブロックを検索して利用します。

このやり方のメリット・デメリットは以下の通りです。

4) SWELLの「ブロック下の余白量」設定

ブロックエディタ完全対応のデザインテーマ「SWELL」なら、行間（余白量）を調整する専用機能があります。

記事編集中に、マウス操作で行間を選択することができます。

空欄以外のブロックを選択して「ブロック下の余白量」を設定します。

編集エリアのボタン、もしくは右側のブロック設定で操作できます。

マニュオン

「このブロックに設定」の下に余白（行間）ができています。

HTMLをのぞくと、CSS（スタイルシート）が設定されていることがわかります。

.u-mb-60 {
    margin-bottom: 6em!important;
}

このやり方のメリット・デメリットは以下の通りです。

5) CSSカスタマイズ（行間・余白量）

全記事の行間を詰めたり、空けたりする設定も可能です。

ここでは、WordPressテーマ「SWELL」を例にして説明します。

SWELLでは、以下のCSS（スタイルシート）をコピペで追加すれば、行間設定を変更することができます。（数字はお好みで）

/* Line height */
.post_content {
  line-height: 2;
}
/* Block margin */
.post_content > * {
  margin-bottom: 3em;
}
/* Inline img middle */
.post_content p > img {
  vertical-align: middle;
}

• 「vertical-align」でインライン画像が上にはみ出ないようにしています。（お好みで）
• 「margin-bottom」を変更しても、表の上に表示される「スクロールできます」のガイドテキストは浮かないみたいです。

line-height（行間）

「line-height」は、ブロック内でテキストが折り返されたとき（同一ブロック内）の行間が変更されます。

margin-bottom（余白量）

「margin-bottom」は、ブロックとブロックの間の余白量（異なるブロック間）が変更されます。

スマホだけ変更したい場合

スマホだけ行間（余白量）を変えたい場合は、以下のようなコードをさらに追加してください。（数字はお好みで）

@media (max-width: 599px) {
.post_content {
  line-height: 2.2;
}
.post_content > * {
  margin-bottom: 2.8em;
}
}

タブレットだけ変更したい場合

タブレットだけ行間（余白量）を変えたい場合は、以下のようなコードをさらに追加してください。（数字はお好みで）

@media screen and (max-width: 782px) {
.post_content {
  line-height: 2.1;
}
.post_content > * {
  margin-bottom: 2.9em;
}
}

このやり方のメリット・デメリットは以下の通りです。

ここからは、以下の 2つのCSSカスタマイズ方法を説明します。

1) 子テーマでCSSを設定する方法

子テーマ（Child）を利用している場合は、上記のCSSをコピペで設定できます。

SWELLの子テーマをダウンロード/インストールする方法は、以下をご覧ください。

あわせて読みたい

SWELLの購入方法と購入後の導入手順【必須初期設定2つ＋専用子テーマ】 この記事では、ワードプレス有料テーマ「SWELL」の購入方法や購入後の導入手順を、画像を用いてわかりやすく解説します。 購入後にやることとして、テーマのダウンロー…

SWELLの購入方法と購入後の導入手順【必須初期設定2つ＋専用子テーマ】

左メニューの[外観]→[テーマエディター]をクリックして、テーマファイルの編集画面を開きます。

「SWELL CHILD」テーマのスタイルシート（style.css）の下部に、上記のCSSをコピペして[ファイルを更新]します。

子テーマでは、外観（見た目）を確認しながら編集することができません。

編集したら、公開ページを[F5]ボタンで更新するなどして外観（見た目）を確認してください。

2) カスタマイザーの「追加CSS」で設定する方法

カスタマイザーでは、外観（見た目）を確認しながらCSSを編集することができます。

左メニューの[外観]→[カスタマイズ]をクリックして、「カスタマイザー」を開きます。

左メニューの[追加CSS]をクリックします。

赤枠の欄に上記のCSSをコピペして[公開]をクリックします。

マニュオン

CSSだけであれば子テーマやプラグインは必要ありません。

参考) プラグインでCSSを設定する方法

一応プラグインを使う方法もあります。

詳しくは、「Simple Custom CSS and JS」などで検索してみてください。

参考）文字サイズ（フォントサイズ）を変更

ついでに文字サイズ（フォントサイズ）を変更したい場合は、以下をご覧ください。

6) CSSカスタマイズ（見出し上の余白量）

全記事の見出し（hタグ）上の余白を詰めたり、空けたりする設定も可能です。

SWELLでは、以下のCSS（スタイルシート）をコピペで追加すれば、見出し上の余白量を変更することができます。（数字はお好みで）

/* h margin */
.post_content h2 {
  margin-top: 4em;
}
.post_content h3 {
  margin-top: 3em;
}

CSSの追加方法は、前項目と同じです。

この記事のまとめ

WordPress（ワードプレス）のブロックエディタ（Gutenberg）で行間を空けるやり方を見てきました。

クラシックエディタ（Classic Editor）から乗り換えて、最初につまずくポイントの 1つです。

なるほどくん

つまづいてました。

デザインテーマSWELLなら、ブロックエディタ完全対応で編集作業も思いのままです。

導入するだけでおしゃれ（スタイリッシュ）なデザインになるWordPressテーマSWELLを、あなたのサイトに導入しましょう。

＼ おしゃれで簡単 ／

SWELLを見てみる

＼ 口コミ1,000件以上 ／

口コミと評判レビュー

＼ 画像付きで間違えない ／

購入方法と初期設定

SWELLのデザインカスタマイズは、以下も参考にしてください。

あわせて読みたい

SWELLデザインカスタマイズの必須10項目【記事テンプレート付】 この記事では、WordPressテーマ「SWELL」のデザインカスタマイズのやり方と使い方を、画像を用いてわかりやすくご紹介します。 SWELLは、マウス操作だけで、簡単にオリ…

SWELLの外観カスタマイズ（カスタマイザー）のより詳細の使い方は、以下をご覧ください。

あわせて読みたい

【全27項目】SWELLの外観カスタマイズの設定方法 この記事では、WordPressテーマ「SWELL」の外観カスタマイズ（カスタマイザー）の設定項目を、ほぼすべてご紹介します。 フォント、見出し、ロゴ、ピックアップバナーな…

SWELLに目次ハイライト機能やフローティングボタン（固定ボタン）を追加する子テーマ「SWELL PLUS」を作りました。

マニュオン

SWELL子テーマ「SWELL PLUS」【目次ハイライト・フローティングボタン】 | マニュオン シンプルなSWELLに最小限の機能追加 「SWELL PLUS」は、WordPressテーマ「SWELL」に機能を追加する子テーマです。 SWELL本体で使用できるアイコンが充実したため、アイコン…

SWELL子テーマ「SWELL PLUS」【目次ハイライト・フローティングボタン】 | マニュオン

よくある質問（FAQ）

行間（line-height）と余白量（margin-bottom）の違いはなんですか？

行間（line-height）は、同一ブロック内で長い文章が折り返されたときの間隔です。

余白量（margin-bottom）は、異なるブロック間（文章以外も含む）の間隔です。

詳しくはこちらをご覧ください。

外観カスタマイズの「追加CSS」で「何かうまくいかなかったようです。」と表示されるのはなぜですか？

レンタルサーバーのWAF機能によってブロックされていることが多いようです。

ConoHaやロリポップを利用している場合は、以下をご覧ください。

SiteGuard WP Pluginの設定方法と不具合対処【404/403エラー】