WordPressのブロック間に空白を追加または削除する方法（4つの方法）

WordPressのブロックエディターはとても使いやすいにもかかわらず、多くのユーザーがブロック間のスペースのコントロールに苦労しています。コンテンツが窮屈に感じられたり、広がってしまったり、初期設定の間隔設定だけではうまくいかず、イライラすることがあるかもしれません。

私たちは、この問題に直面している多くの読者の声を聞いてきました。そこで、ページレイアウトを完全にコントロールし、より洗練されたプロフェッショナルなサイトを作成できるよう、この問題を解決する効果的な方法をいくつかご紹介します。

この投稿では、WordPressのブロック間に空白を追加または削除する方法を順を追って説明します。

WordPressのブロック間に空白を追加または削除する理由

WordPressは、ビルトインWordPressブロックエディターでカスタムページや投稿を簡単に作成できます。

しかし、特定のブロックを追加したときに、余白が多すぎたり少なすぎたりすることに気づくかもしれません。WordPressのブロック間に余白を追加したり削除したりすることで、思い通りのカスタムページレイアウトを作成することができます。

ブロック間のスペースを調整することで、関連するコンテンツをまとめたり、異なるセクションを区切ったりすることができます。これにより、訪問者の注意を誘導し、どの要素が関連しているかを明確にすることができます。

さらに、適切なスペーシングはコンテンツを分割し、訪問者が情報を読みやすく、理解しやすくします。

すべてにおいて、最終的なWordPressサイトのデザインをよりコントロールすることは、より良いユーザーエクスペリエンスにつながります。

それでは、サイト上のWordPressブロック間に空白を追加または削除する方法を見てみましょう。以下のクイックリンクから、お好きな方法にジャンプしてください：

動画チュートリアル

文章で説明された方がいいという方は、このまま読み進めてください。

方法1：ブロックエディターでWordPressブロック間に空白を追加する

ブロック間に空白を追加する最も簡単な方法は、Gutenbergブロックエディターを使うことです。ビルトインのスペーシングブロックがあり、数回クリックするだけで空白を追加できます。

これを使うには、編集したい投稿やページを開き、「プラス」追加ブロックボタンをクリックします。

次に「スペーサー」を検索し、ブロックを選択する。

これで自動的にページにスペーサーが挿入される。

ブロックを上下にドラッグすることで、大きくしたり小さくしたりできる。

完了したら、「更新」ボタンをクリックして変更を保存します。

ブロックテーマを使用している場合は、フルサイトエディターでテーマテンプレートのブロック間隔を調整することもできます。

詳しくは、初心者向けWordPressフルサイト編集ガイドをご覧ください。

スペーサー・ブロックの挿入とは別に、ブロックのマージンを増やして他のブロックとの間隔を広げることもできます。これらのオプションはブロック設定のサイドバーで調べることができます。

また、ブロックのパディングを調整することもできます。パディングを小さくすればするほど、ブロックとブロックの間隔が狭くなり、初期設定でパディングが追加されているブロックもあります。つまり、ブロックとブロックの間のスペースを取り除く方法と考えることができます。

詳しくは、WordPressのパディングとマージンについてをご覧ください。

ブロックエディターを最大限に活用する方法については、以下のガイドもご覧ください：

• WordPressのMoreブロックの正しい使い方
• WordPressで改行を追加する方法（新規行間）
• WordPressで入れ子ブロックを選択して使用する方法
• WordPressの投稿にマルチカラムのコンテンツを追加する方法（HTML必須なし）

方法2：カスタムCSSを追加してWordPressブロック間の空白を追加または削除する。

ブロック間の空白を追加・削除するもう一つの方法は、テーマにカスタムCSSコードを追加することです。

この作業を行ったことがない場合は、WordPressサイトにカスタムCSSを簡単に追加する方法を事前にご覧になることをお勧めします。

次に、編集したいページまたは投稿を開き、空白を追加または削除したいブロックをクリックします。

次に、右側のオプションパネルにある「ブロック」メニュー項目をクリックします。

その後、「Advanced」ドロップダウンまでスクロールダウンしてクリックする。そのブロックの追加オプション設定が表示されます。

そして、「Additional CSS classes」ボックスに以下のコードを追加する：

.add-remove-bottom-space

このスニペットは、そのブロック専用の新しいCSSクラスを作成します。

その後、「更新」ボタンをクリックして変更を保存します。

次に、外観 ” カスタマイズに移動し、WordPressテーマカスタマイザーを表示します。

次に、下にスクロールして「Additional CSS」メニュー設定をクリックする。

CSSコードを追加するフィールドが表示されます。

次に、以下のコード・スニペットをボックスに貼り付ける：

.add-remove-bottom-space {
 margin-bottom: 0;
}

このコード・スニペットは、下マージンをゼロに設定し、ブロックから空白を取り除きます。

下にスペースを追加したい場合は、「0」を「20px」のように変更するだけでよい。

変更が完了したら、必ず「公開する」ボタンをクリックしてください。

ブロックテーマを使用している場合は、WordPressのテーマカスタマイザーが表示されない場合の修正方法を参照して、CSSコードを追加する場所を確認してください。

プラグインを使用したカスタマイザーコードの保存

WordPressテーマのカスタマイザーにカスタムCSSを追加すると、現在使用しているテーマに対してのみ保存されます。WordPressテーマを変更した場合は、新しいテーマにCSSコードをコピーする必要があります。

カスタムCSSをどのテーマを使っていても適用させたい場合は、プラグインを使う必要がある。

WPCodeは、WordPressサイトにPHP、CSSなどを追加できる最高のコードスニペットプラグインです。

最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化したら、WordPressの管理ダッシュボードからCode Snippets ” + Add Snippetにアクセスする必要があります。

ここで、コードスニペットライブラリの「カスタムコードを追加（新規スニペット）」オプションにマウスオーバーし、「スニペットを使用」ボタンをクリックします。

コード・スニペットの名前を入力し、カスタムCSSを「コード・プレビュー」ボックスに貼り付けます。

コードタイプ」のドロップダウンから「CSSスニペット」を選んでください。

その後、上部のスライダーをクリックしてスニペットを「有効化」し、「スニペットを保存」をクリックすると、WordPressサイトでスニペットが実行されます。

詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。

有効化した後、外観 ” カスタムCSSにカスタムCSSコードを追加してください。

更新が完了したら、「カスタムCSSの更新」ボタンをクリックして変更を保存します。

方法3：CSSヒーローでWordPressブロック間の空白を追加または削除する

WordPressのブロック間に空白を追加または削除するもう一つの初心者に優しい方法は、WordPressカスタムCSSプラグインを使用することです。これにより、CSSコードを編集することなくWordPressブログに視覚的な変更を加えることができます。

CSS Heroプラグインの使用をお勧めします。このプラグインを使えば、WordPressサイトのほぼすべてのCSSスタイルを、個別コードを一行も書かずに編集することができます。

最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、初心者向けWordPressプラグインのインストール方法をご覧ください。

有効化したら、「Proceed to Product Activation」ボタンをクリックしてプラグインを有効化する必要があります。このボタンはインストールされているプラグインのリストの真上にあります。

ユーザー名とパスワードを入力する画面が表示されます。その後、画面の指示に従ってください。アカウントの認証が完了すると、ダッシュボードにリダイレクトされます。

次に、編集したいページまたは投稿を開き、WordPress管理ツールバーの上部にある「CSS Hero」ボタンをクリックします。

これで、CSS Heroが動作している同じページが開きます。プラグインはビジュアルエディターを使っているので、リアルタイムで変更を加えることができます。

ページ上の任意の要素をクリックすると、ページの左側にツールバーが表示され、カスタマイザーを行うことができます。

ブロック間の余白を削除または追加するには、「Spacings」オプションをクリックし、「Margin-Bottom」セクションまでスクロールダウンするだけです。

ここでスライダーを上下に動かして、空白を追加したり削除したりできます。

あなたが行った変更は、自動的にあなたのページに表示されます。

変更が完了したら、’Save’ボタンをクリックして変更を有効にします。

方法4：SeedProdでWordPressブロック間の空白を追加または削除する

SeedProdは 最高のドラッグ＆ドロップページビルダーで、100万以上のサイトで使用されています。実際にWPBeginnerや他のブランドのカスタムページを作成するために使用しています。

SeedProdは、カスタム404ページ、セールスページ、ランディングページ、および大いに多くを作成するための300以上のテンプレートのライブラリを持っています。コードを書かずにカスタマイザーWordPressテーマを作成することもできます。

ドラッグ＆ドロップビルダーを使えば、サイトのデザインを完全にコントロールでき、どんなサイト要素でも簡単にスペーシングを削除したり追加したりできます。

さらに詳しく知りたい方は、WordPressでカスタムページを作成する方法をご覧ください。

ページのカスタマイザーとして、スペーサーブロックを使って任意の場所にスペースを追加することができます。

ドラッグ＆ドロップするだけで、ページ上のブロックとブロックの間にスペースを追加できます。

次に、スライダーで高さを調整します。

ブロック間のスペースもコントロールできます。そのためには、スペースを追加または削除したいブロックをクリックするだけです。

左側にオプションパネルが表示されるので、「詳細設定」タブをクリックします。

次に、「スペーシング」ドロップダウンまでスクロールダウンしてクリックする。

マージン」をコントロールするメニューが表示されます。下の余白ボックスに数字を入力するとスペースが追加され、数字を削除すると既存の余白が削除されます。

変更が完了したら、「保存」ボタンをクリックします。

その後、’公開する’ドロップダウンを選択し、変更を公開します。

この投稿がWordPressブロック間に空白を追加または削除する方法を学ぶのにお役に立てば幸いです。WordPress投稿リビジョンガイドや、エキスパートが選ぶ最高のGutenbergブロックプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.