WordPressブロック間のスペースを追加または削除する方法 

WordPressでページを作成しましたが、何かがうまくいかないようです。2つのブロックが離れすぎているか、マージンをゼロに何度設定してもギャップが閉じません。

多くの初心者が、問題がスペーシングにあることに気づかずに、「うまくいかない」ページに苦労しているのを見てきました。スペースが多すぎると断絶されたように見え、少なすぎると散らかって見えます。

WordPressでは、コードありでもなしでも、ブロック間のスペースを追加または削除できます。まずギャップがどこから来ているのかを見つけ、次にSeedProd、ブロックエディター、ブロック間隔、または少量のCSSで修正する方法を説明します。

WordPressブロック間にスペースを追加または削除する理由

修正を依頼された散らかったページの大半は、フォントや色の問題ではありません。スペーシングの問題です。

ホワイトスペースは無駄なスペースではありません。コンテンツに集中し、ページのフローを理解するのに役立ちます。

ほとんどのWordPressテーマは、デフォルトで独自のパディングまたはマージンを追加するため、セクションが不均一に見えることがあります。これらのスペースを調整することで、ページの各部分の接続方法をより細かく制御できます。

調査によると、余白は理解度を約20％向上させることができます。これは、いくつかの小さなスペーシングの調整で、コンテンツがより読みやすく、閲覧がより楽しくなることを意味します。

ブロックのスペーシングを微調整したい理由は次のとおりです。

• 関連コンテンツをグループ化して、より明確にする。
• 異なるセクションを分離して、フローを改善する。
• ページを読みやすく、ナビゲートしやすくする。

スペースの発生源を見つける

何かを変更する前に、スペースが実際どこから来ているのかを突き止めてください。ほとんどのスペーシングの問題は数カ所のいずれかにたどり着きます。間違った場所を修正しようとするから、ギャップが動かないのです。

私はいつもリストビューから始めます。テーマの設定よりも、スペーサーブロックの置き忘れが原因であることが多いためです。確認する順序は次のとおりです。

• ギャップの上にあるブロックを確認：それをクリックし、[寸法]の下にある下マージンとパディングを確認します。
• 下のブロックを確認：それをクリックし、上マージンとパディングを確認します。
• リストビューを開く：迷子のスペーサーブロックまたは削除できる空の段落を探します。
• 親ブロックを確認：ブロックがグループまたはカラムブロック内にある場合は、親を選択し、そのブロック間隔を確認します。
• テーマを除外：エディターは問題なく見えても、公開ページに問題がある場合は、スペースはテーマのCSSから来ています。公開ページでギャップを右クリックし、「検証」を選択して、それを追加しているルールを確認します。

設定を一つ触る前にソースに名前を付けることが、5分で解決できる問題と1時間の試行錯誤を分ける鍵となります。

ヘッダーと本文の間の余白は、通常、後者のカテゴリに分類されます。これはテーマやテンプレートによって設定されるため、コンテンツブロックではなく、サイトエディターまたは少量のCSSで調整します。

SeedProdを使用してWordPressブロック間にスペースを追加または削除する

WordPressで余白を管理する最も簡単な方法は、SeedProdを使用することです。これは、コードに一切触れることなく、完全なページやテーマをデザインできるドラッグアンドドロップのウェブサイトビルダーです。レイアウトの完全な視覚的制御を求める100万人以上のウェブサイト所有者に利用されています。

私は自分でSeedProdを使用して自分のウェブサイトを構築していますが、私はデザイナーではありません。私が気に入っているのは、スペーシングの調整、セクションの移動、レイアウトのバランス調整など、すべての変更をライブで確認でき、すべてが完全に正しく見えるまで調整できることです。

プラグインをインストールして有効化した後、WordPressダッシュボードからSeedProd » ランディングページを開きます。

ここから、新しいページを作成するか、既存のページを編集してビジュアルビルダーを起動できます。

ビルダー内で、ブロックをレイアウトに直接ドラッグアンドドロップでき、ページの見た目をすぐに確認できます。

追加のスペースを挿入するには、スペーサーブロックをレイアウトにドラッグします。

左側のパネルにある高さスライダーを使用して、必要な場所の余白を増減します。ヒーローバナー、お客様の声、CTAなどのセクション間に少しスペースを追加して、各セクションを目立たせるようにしています。

ブロックごとに間隔を微調整することもできます。ブロックをクリックし、左側のパネルで詳細設定タブを開き、間隔セクションを探します。

ここで、余白（ブロックの外側のスペース）または内側のパディング（ブロックの内側のスペース）を調整できます。ここで微調整を行うことで、デザインがよりバランスが取れ、プロフェッショナルに見えるようになります。

結果に満足したら、保存をクリックし、次に公開をクリックしてページを公開します。モバイルでレイアウトをプレビューして、デバイス間でスペーシングがどのように見えるかを確認することもできます。

最初のカスタムページの作成については、WordPressでランディングページを作成する方法に関する完全ガイドをご覧ください。

WordPressブロックエディターを使用してスペースを追加または削除する

WordPressのブロックエディター（Gutenbergとも呼ばれます）には、余白を制御するための組み込みツールがあります。他のブロックの間に空白を追加するブロックはスペーサーブロックであり、追加のWordPressプラグインなしで調整できます。

完全なビルダーを必要としない投稿の簡単な間隔調整には、ブロックエディターを使用します。まず、編集したい投稿またはページを開き、+ ブロックを追加ボタンをクリックしてから、「スペーサー」と入力してスペーサーブロックを選択します。

これにより、レイアウトに空白ブロックが挿入されます。ブロックの下部にあるハンドルをドラッグするか、サイドバーの設定を使用して高さを調整します。高さの値が大きいほど、ブロック間に表示される余白が増えます。

より小さな視覚的な区切りには、代わりにセパレーターブロックを試してください。これは、過剰な空きスペースを作成することなくセクションを分割するのに役立つ、微妙な区切り線を追加します。

個々のブロックの間隔を微調整することもできます。「寸法」の下にある「余白」または「パディング」オプションを探し、右側の設定パネルを開きます。

間隔に一貫性がないことに気づいた場合は、リスト表示パネルを開きます。ページ上のすべてのブロックが表示され、重複したスペーサーブロックや調整が必要なギャップを簡単に見つけることができます。不要なスペーサーや空の段落を見つけたら、削除してギャップを閉じます。

すべてがバランス良く見えるようになったら、更新をクリックして変更を保存します。すべてのデバイスで間隔が自然に感じられるように、必ずデスクトップとモバイルの両方でページをプレビューしてください。

段落間のスペースを削除

エディターでEnterキーを押すと、まったく新しい段落ブロックが作成され、段落間に全行のスペースが追加されます。2行を密接に保つには、代わりにShift + Enterを押します。これにより、同じブロック内に改行が追加されます。

個別の段落間のギャップについては、いずれかを選択し、寸法パネルで余白を減らします。

ブロック間隔を調整してギャップを閉じる

個々のブロックの余白とパディングが機能しない場合、ギャップはブロック間隔によって設定されます。これは、親ブロックが子ブロックの間に配置するスペースです。これは、初心者が最も見落としがちな修正です。

ブロック自体の設定でギャップが閉じない場合は、いつでもこれを使用します。通常はこれでうまくいきます。リスト表示で2つのブロックを選択し、右クリックしてグループ化を選択します。

グループを選択した状態で、寸法パネルを開き、「ブロック間隔」コントロールを見つけます。ギャップを閉じるために下にドラッグするか、カスタム値を設定してブロックを均等に配置します。

同じ設定で、カラム間のスペースも制御します。親のカラムブロックを選択し、[寸法]を開いて、ブロック間隔を調整して、各カラム間のギャップを広げたり狭めたりします。

カラムブロックでは、左右を解除して水平と垂直のギャップを個別に設定できます。垂直の値は、カラムがモバイルで積み重なったときのスペーシングを制御します。

カスタムCSSを使用してブロック間のスペースを追加または削除する

スペーシングをより正確に制御したい場合は、カスタムCSSを使用して、ブロックの正確なマージンまたはパディング値を設定できます。CSSは、すべてのページで同じスペーシングが必要な場合にのみ使用します。ビジュアルオプションは、一度限りの修正にはより高速です。

サイト全体のスペーシングについては、ブロックテーマを使用すると、CSSよりも迅速な方法が得られます。[外観] » [エディター] » [スタイル] » [レイアウト]に移動し、グローバルなブロック間隔を調整します。これにより、すべてのページが一度に更新されます。

開発者は、テーマのtheme.jsonファイルに直接同じ値を設定できます。カスタマイザーを介したカスタムCSSは、クラシック（ブロックではない）テーマ、または特定のブロックに1つの正確な値が必要な場合に適切なツールです。

クラスを使用するには、まずエディターで調整したいブロックを選択します。右側のサイドバーで、[高度な設定]セクションを開き、[追加CSSクラス]というラベルのフィールドを探します。

ここで、custom-spacingのようなカスタムクラス名を割り当てることができます。

次に、WordPressダッシュボードで[外観] » [カスタマイズ] » [追加CSS]に移動します。このオプションは、サイトエディターを使用しないクラシックテーマにのみ表示されます。テーマにサイトエディターが含まれている場合は、代わりにWPCodeのようなプラグインでCSSを追加してください。

CSSエディターで、次のような簡単なルールを入力します。

.custom-spacing { margin-bottom: 20px; }

この例では、そのクラスを持つすべてのブロックの下に20ピクセルのスペースを追加します。スペースを完全に削除するには、代わりに値を0に変更します。レイアウトに合わせてスペースを調整するために、さまざまな値を試すことができます。

完了したら、[公開]をクリックして変更を保存します。キャッシュプラグインを使用している場合は、新しいスタイルが正しく表示されるように、後でキャッシュをクリアしてください。

カスタムCSSは、特定の要素に正確なスペースが必要な場合に最適ですが、ほとんどのユーザーにとっては、SeedProdまたはブロックエディターの視覚的なオプションの方が迅速かつ簡単です。

WordPressブロックのスペース設定のベストプラクティス

私が最もよく見る間違いは、セクションごとに異なるギャップがあることです。これにより、良いコンテンツでも乱雑に見えます。スペーシングの仕組みを理解したら、ページ全体で一貫性を保つために数分余分にかける価値があります。

良いホワイトスペースは、どこでも同じ量を使用することではありません。コンテンツが読みやすく、視覚的につながっているように感じられるバランスを作り出すことです。

• スペーシングを一貫させる：テキストと画像のような関連セクション間のギャップを似たものにして、デザインが意図的であるように感じさせます。
• 主要なエリアにスペースを増やす：CTA、お客様の声、注目のセクションは、余分なホワイトスペースに囲まれるとより際立ちます。
• グループ化された要素を詰める：カラムまたはコンテンツボックス内では、マージンとパディングを減らして、要素を視覚的にリンクさせます。
• すべてのデバイスでプレビュー：デスクトップで完璧に見えるレイアウトでも、モバイルでは窮屈すぎたり緩すぎたりする場合があります。常にモバイルプレビューを確認してください。
• マージンとパディングを覚えておく: マージンはブロックの外側にスペースを追加し、パディングは内側にスペースを追加します。レイアウトのニーズに合わせてそれぞれ調整してください。
• プロポーションを保つ: 一般的なルールとして、主要なセクション間には40〜60px、グループ化されたコンテンツ内にはより小さな間隔を使用します。

WordPressブロックのスペース設定に関するFAQ

WordPressでブロック間に追加または削除するスペースに関する一般的な質問への簡単な回答を以下に示します。

他のブロックの間に空白を追加するブロックは何ですか？

スペーサーブロックです。WordPressエディターで、スペースを追加したい場所にスペーサーブロックを追加し、ピクセル単位で高さを設定してスペースの量を制御します。

空のスペースの代わりに細い区切り線が必要な場合は、セパレーターブロックを使用します。どちらも組み込みなので、プラグインは不要です。

WordPressでヘッダーと本文の間の白いスペースを削除するにはどうすればよいですか？

そのギャップは、コンテンツブロックではなく、ほとんどの場合テーマまたはテンプレートのスペーシングによるものです。

ブロックテーマでは、[外観] » [エディター] » [スタイル] » [レイアウト]を開き、グローバルな[ブロック間隔]を減らすか、ヘッダーテンプレートパートを編集します。クラシックテーマでは、ヘッダーまたはメインコンテンツ領域を対象とする小さなカスタムCSSルールで削除します。

マージンとパディングを0に設定しても、ギャップが残るのはなぜですか？

そのスペースはそのブロックから来ているわけではないからです。通常は、親のグループまたはカラムブロックの[ブロック間隔]、残りのスペーサーブロック、またはテーマのデフォルトCSSによって設定されています。

親ブロックを選択して[ブロック間隔]を確認し、リストビューを開いてスペーサーを探し、ギャップがライブページにのみ表示される場合はブラウザのインスペクトを使用します。

WordPressのスペーシングはSEOに影響しますか？

直接ではありませんが、クリーンなレイアウトは可読性とユーザーエクスペリエンスを向上させます。ページが読みやすくナビゲートしやすくなるほど、訪問者は長く滞在する可能性が高くなり、エンゲージメントシグナルを間接的に改善できます。

ブロックの間隔を正しく設定する

間隔を正しく設定すると、サイト全体の雰囲気が変わります。コンテンツに余裕ができると、読みやすくなり、より洗練された見た目になります。

ブロックエディターを使用する場合でも、少量のCSSを使用する場合でも、視覚的に構築する場合でも、鍵は一貫性です。スペースを空けながらすべての変更をライブで確認したい場合は、SeedProdでページを構築し、推測を排除してください。

レイアウトの改善を続けたい場合は、次に探索するのに役立つガイドをいくつか紹介します。

• WordPressでボックスシャドウを追加する方法
• WordPressでページタイトルを非表示にする方法
• WordPress でブログレイアウトを変更する方法
• WordPressでページをフル幅にする方法

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。