文章の間を空けるために、
Enterキーを何度も
押していませんか?

文章の間を広くしたくて、Enterキーを何度も押していませんか?その方法は手軽ですが、スマートフォンで大きな空白ができることがあります。今回は、あとから直しやすい空白の作り方を、難しい言葉をできるだけ使わずにご紹介します。

WordPressの記事でEnterキーを何度も押して空白を作ってよいか悩む女性の水彩イラスト

見出しだけが残る、大きな空白ができる。その原因は?

文章と文章の間を広くしたくて、Enterキーを何度も押していませんか?

その場ではきれいに見えても、文章を追加したりスマートフォンで見たりすると、空白が大きくなりすぎることがあります。

  • 見出しだけがページの下に残る
  • スマートフォンでは空白が大きくなりすぎる
  • 文章を追加すると、後ろの内容までずれる
  • どの改行を消せばよいか分からなくなる

大切なのは、Enterを使ってはいけないということではありません。文章を分けるときはEnter、広い空白を作るときは空白専用の機能と、目的に合わせて使い分けることです。

先に結論
文章を分けたいときはEnterを1回。少し下へ送るために広い空白を作りたいときは、「スペーサー」という空白専用の機能を使うと、あとから簡単に広さを変えられます。

実際の表示で比べてみましょう

下の2つは、見出しと本文がまったく同じです。空白の作り方だけを変えています。

現在:パソコン幅の比較

Enterを4回押した例崩れやすい

新しいサービスを始めました

空の段落 × 4

お客様のお悩みに合わせて、内容を一緒に整理しながらご提案します。

空の段落が4個残るため、見出しと本文の関係が切れて見えます。

空白専用の機能を使った例おすすめ

新しいサービスを始めました

空白を小さめに設定

お客様のお悩みに合わせて、内容を一緒に整理しながらご提案します。

空白の広さを1か所で変えられるため、あとから調整しやすくなります。

見た目だけでなく、あとからの直しやすさが違います。
左は、文章のない行を4つ重ねています。右は、空白を1つ置いて広さを指定しています。右なら、広すぎたときもその空白を1か所直すだけです。

まず知っておきたいメリット・デメリット

Enterを何度も押す方法

  • 良いところ:すぐに空白を作れる
  • 困るところ:空白が広すぎたとき、どの行を消せばよいか分かりにくい
  • 困るところ:パソコンとスマートフォンで見え方が変わりやすい

空白専用の機能を使う方法

  • 良いところ:空白の広さを1か所で変えられる
  • 良いところ:あとから文章を増やしても整理しやすい
  • 困るところ:最初だけ、追加する場所を覚える必要がある

最初の1回だけ少し手間が増えますが、その後の修正は空白専用の機能を使う方が簡単です。

いちばん簡単な方法:「スペーサー」を使う

「スペーサー」は、文章と文章の間に置く、空白専用の部品です。難しい設定をしなくても、空白を目で見ながら広げたり狭めたりできます。

  1. 空白を入れたい場所の「+」を押す
  2. 「スペーサー」と検索する
  3. 表示された「スペーサー」を選ぶ
  4. 追加された空白を選び、広さを調整する
WordPressのブロック追加画面で、プラスボタンを押し、スペーサーを検索して選ぶ手順

「+」を押したあと、左側の検索欄へ「スペーサー」と入力し、表示された検索結果を選びます。

WordPressで追加したスペーサーを選び、右側の高さ設定を調整する画面

追加された空白を選ぶと、画面右側に「高さ」が表示されます。数字を小さくすると、空白も狭くなります。

広すぎた場合は、追加したスペーサーをもう一度選び、狭くします。Enterで作った空白のように、消す行を探す必要はありません。

最初は「少し狭いかな」と感じる程度から試すのがおすすめです。スマートフォンでは、パソコンより空白が広く感じられることがあります。

慣れてきたら、見出しの設定から空白を変える

使っているWordPressの種類によっては、見出しを選んだときに、右側へ「サイズ」や「寸法」という項目が表示されます。

  1. 空白を変えたい見出しを選ぶ
  2. 画面右上の歯車マークを押す
  3. 「スタイル」を開く
  4. 「サイズ」または「寸法」の中から、外側の間隔を調整する

画面に「マージン」と表示されることがあります。これは、文章や見出しの外側にある空白という意味です。

この項目が見つからなくても問題ありません
テーマによっては表示されません。その場合は、先ほどの「スペーサー」を使えば大丈夫です。

WordPress公式の案内
余白設定の場所や元に戻す方法は、Dimension Settings overview、スペーサーの追加と高さ変更は、Spacer blockでも確認できます。

公開前にスマートフォンでも確認する

パソコンでちょうどよい余白でも、画面の狭いスマートフォンでは広く見えることがあります。

公開前にプレビューを開き、次の3点を確認してください。

  • 見出しと本文が離れすぎていないか
  • 画面1枚分ほどの空白ができていないか
  • 次の内容が続いていることが分かるか
WordPressの記事を公開する前にスマートフォンで確認したい3項目

空白が足りないときも、スペーサーを何個も追加するのではなく、1つの広さを調整します。

Elementorを使っている場合

編集画面の左側にElementorのメニューが出るサイトでは、見出しや文章を選び、「高度な設定」→「マージン」を開きます。「マージン」は、要素の外側にある空白のことです。

スマートフォンだけ空白を変えたい場合は、先にスマートフォンのマークへ切り替えてから調整します。どこを触ればよいか分からない場合は、無理に数値を変えず、元の画面へ戻してください。


まとめ ── 空白ではなく「役割」で使い分ける

今回のポイント

✓ 文章を分けるときはEnterを1回
✓ 広い空白には「スペーサー」を使う
✓ 空白は何個も重ねず、1つの広さを調整する
✓ 公開前にスマートフォンでも確認する

ご自身で整えられた場合は、ここまでで大丈夫です。

もし「設定項目が見つからない」「ページごとに余白がバラバラ」「スマートフォンだけ大きく崩れる」という場合は、テーマやページの作り方によって調整場所が異なります。

WordPressの部分修正や、スマートフォン表示の調整も承っています。
現在の画面と気になる箇所を添えて、お気軽にご相談ください。

ご相談・お問い合わせ →

💬 コメント・いいね