ブロックエディターのスペーサーブロックの使い方!ブロック間の余白量をコントロールしよう!
![ブロックエディターのスペーサーブロックの使い方!ブロック間の余白量をコントロールしよう!](https://webnote-plus.com/wp-content/uploads/2021/09/block-spacer.png)
WordPressのブロックエディター、「スペーサーブロック」についてご紹介します。
スペーサーブロックを使うことで、ブロック間の余白を自由に調整することができます。
WordPressテーマやプラグインによっては、スペーサーブロックを使わずに余白を調整する機能もあるので、そちらも記事後半でご紹介します。
余白をうまく活用して見やすいコンテンツを作っていきましょう。
WordPressブロックエディターの使い方をまとめたガイドを作りました。
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)
スペーサーブロックでできること
スペーサーブロックは、ブロック間の余白をコントロールすることができるブロックです。
以下が、通常のブロック間の余白と、スペースブロックで余白を大きくした比較の画像です。
スペーサー無し
![スペーサーが無い場合の余白](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-none.jpg)
![スペーサーが無い場合の余白](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-none.jpg)
スペーサー有り(100px)
![100pxの余白は配置した場合](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-example.jpg)
![100pxの余白は配置した場合](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-example.jpg)
このような形でブロック間の余白をコントロールすることができます。
以下画像のように、Enterキーで段落を変えていくだけではブロック間の余白は作れません。
![スペーサーが無い場合の余白-2](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-example-2.jpg)
![スペーサーが無い場合の余白-2](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-example-2.jpg)
ブログ記事でも、デザインの面でも、見やすいコンテンツを作るために「余白」はとても大切です。
個人的に好きな書籍のリンクを置いておきます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
うまく余白を活用して見やすいコンテンツを作りたいですね…!
では、さっそくスペーサーブロックの使い方を紹介していきます。
スペーサーブロックの使い方
スペーサーブロックは以下の手順で使うことができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
とってもとっても簡単です…!
![スペーサーブロックの使い方-1](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual.jpg)
![スペーサーブロックの使い方-1](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual.jpg)
![スペーサーブロックの使い方-2](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual-2.jpg)
![スペーサーブロックの使い方-2](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual-2.jpg)
![スペーサーブロックの使い方-3](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual-3.jpg)
![スペーサーブロックの使い方-3](https://webnote-plus.com/wp-content/uploads/2021/09/spacer-manual-3.jpg)
スペーサーブロックの使い方としてはこれだけです。
ちなみにブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。
スペーサーブロックの場合は、以下の名称でブロックを呼び出すことができます。
- /spacer
- /スペーサー
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
覚えておくとかなり執筆の時短になりますよ…!
スペーサー以外で余白を簡単に調整する方法
ブロック間の余白を調整するときに大活躍するスペーサーブロックですが、毎回スペーサーブロックを呼び出すのは地味に面倒です。
そこで、スペーサーブロックを使わずにブロック間の余白を簡単に調整することができる機能を持ったWordPressテーマとプラグインを紹介します。
紹介するのは以下の2製品です。
- SWELL ※テーマ
- Arkhe Blocks ※プラグイン
それぞれ紹介していきます
SWELLの「ブロック下の余白」設定機能
![WordPressテーマ『SWELL』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_20.jpg)
![WordPressテーマ『SWELL』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_20.jpg)
ブロックエディター完全対応のWordPressテーマ『SWELL
ブロックツールバーとは、ブロックを選択した際に表示されるツールバーのことです。
![ブロックエディターのブロックツールバー](https://webnote-plus.com/wp-content/uploads/2021/08/block-tool-bar.jpg)
![ブロックエディターのブロックツールバー](https://webnote-plus.com/wp-content/uploads/2021/08/block-tool-bar.jpg)
SWELLのブロックツールバーの以下赤枠部分が「ブロック下の余白」ボタンです。
![SWELLのブロック下の余白設定機能](https://webnote-plus.com/wp-content/uploads/2021/09/swell-margin.jpg)
![SWELLのブロック下の余白設定機能](https://webnote-plus.com/wp-content/uploads/2021/09/swell-margin.jpg)
ここから、余白を調整したいブロックを選択した状態で簡単に余白を調整できます。
実際にブロック下の余白を調整している動画を用意しました。
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
スペーサーブロックを追加しなくて良いのはかなり便利です…!
\ ブロックエディターの使い心地が最高 /
SWELLについては以下の記事も見てみてください。
Arkhe Blocksの「ブロック上の余白」設定機能
![WordPressテーマ『Arkhe』](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-04_22h54_51.jpg)
![WordPressテーマ『Arkhe』](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-04_22h54_51.jpg)
公式ディレクトリにも掲載されているプラグイン『Arkhe Blocks』には「ブロック上の余白」を調整できるボタンがブロックツールバーに追加されます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
Arkhe BlocksはSWELLと同じ開発者さんのプラグインです…!
SWELLとは逆で、選択したブロックの上の余白を自由にコントロールできます。
ブロックツールバーの以下赤枠部分がArkhe Blocksの「ブロック上の余白」ボタンです。
![Arkhe Blocksのブロック上の余白設定機能](https://webnote-plus.com/wp-content/uploads/2021/09/arkhe-blocks-margin.jpg)
![Arkhe Blocksのブロック上の余白設定機能](https://webnote-plus.com/wp-content/uploads/2021/09/arkhe-blocks-margin.jpg)
こちらも実際にブロック上の余白を調整している動画を用意しました。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
プラグインなので導入も比較的容易で助かりますね…!
\ ブロックエディターが高機能に進化! /
Arkhe Blocksについては以下の記事も見てみてください。
余白を調整して見やすいコンテンツを作りましょう!
ブロック間の余白を調整することができる「スペーサーブロック」の使い方をご紹介しました。
見やすいコンテンツを作るために「余白」はとても大切な要素です。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
うまく余白を活用していきたいですね…!
また、スペーサーブロックを使わずに余白を調整することができる機能を持ったテーマとプラグインもご紹介しました。
スペーサーブロックを毎回配置するのが面倒という場合は、これらの製品を使うことで手間が減ってかなり時短にもなるのでおすすめです。
適度に余白を使い分けながら、見やすいコンテンツを作っていきましょう。
最後まで読んでいただきありがとうございました。
SWELL公式サイト
ブロックエディターの関連記事
ブロックエディターの使い方完全ガイド↓↓
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/fcc46445049aba49d2226655e4d6bef4-300x169.png)