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

WordPressブロック間の空白を追加または削除しますか？

WordPressブロック間に空白を追加または削除することで、WordPressサイトのデザインをよりコントロールすることができます。

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

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

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

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

最終的なWordPressサイトのデザインをよりコントロールすることで、訪問者により良いユーザー体験を提供することができます。

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

動画チュートリアル

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

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

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

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

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

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

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

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

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

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

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

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

この方法では、ブロックとブロックの間に空白を入れることしかできないことに注意してください。スペースを削除するには、以下の他の方法のいずれかを使用する必要があります。

方法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コードをコピーする必要があります。

カスタム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万以上のサイトで使用されている最高のドラッグ＆ドロップページビルダーです。

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

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

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

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

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

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

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

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

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

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

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

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

WordPressのブロック間に空白を追加または削除する方法について、この投稿がお役に立てば幸いです。また、ポッドキャストを始める方法や、WordPressホスティングサービスのエキスパートが選ぶベストプロバイダーもご覧ください。

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.