ブロックエディターのスペーサーブロックの使い方!ブロック間の余白量をコントロールしよう!

WordPressのブロックエディター、「スペーサーブロック」についてご紹介します。

スペーサーブロックを使うことで、ブロック間の余白を自由に調整することができます。

余白はとっても大切ですよね…!
この記事の内容まとめ
  • スペーサーブロックの使い方
  • スペーサー以外で余白を調整する方法

WordPressテーマやプラグインによっては、スペーサーブロックを使わずに余白を調整する機能もあるので、そちらも記事後半でご紹介します。

余白をうまく活用して見やすいコンテンツを作っていきましょう。

ブロックエディターの使い方が不安な方は、まずこちらの記事もみてみてください。

目次

スペーサーブロックでできること

スペーサーブロックは、ブロック間の余白をコントロールすることができるブロックです。

以下が、通常のブロック間の余白と、スペースブロックで余白を大きくした比較の画像です。

スペーサー無し

スペーサーが無い場合の余白

スペーサー有り(100px)

100pxの余白は配置した場合

このような形でブロック間の余白をコントロールすることができます。

補足

以下画像のように、Enterキーで段落を変えていくだけではブロック間の余白は作れません。

ブロックの間に余白が欲しい場合は、「スペーサーブロック」を配置する必要があります。

スペーサーが無い場合の余白-2

ブログ記事でも、デザインの面でも、見やすいコンテンツを作るために「余白」はとても大切です。

個人的に好きな書籍のリンクを置いておきます。

さとしん

うまく余白を活用して見やすいコンテンツを作りたいですね…!

では、さっそくスペーサーブロックの使い方を紹介していきます。

スペーサーブロックの使い方

スペーサーブロックは以下の手順で使うことができます。

さとしん

とってもとっても簡単です…!

STEP
メインコンテンツエリアで+ボタンをクリック
スペーサーブロックの使い方-1
STEP
「スペーサー」を探してクリック
スペーサーブロックの使い方-2
STEP
サイドバー「ピクセル値での高さ」で余白量を調整
スペーサーブロックの使い方-3

スペーサーブロックの使い方としてはこれだけです。

ちなみにブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

スペーサーブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /spacer
  • /スペーサー
さとしん

覚えておくとかなり執筆の時短になりますよ…!

スペーサー以外で余白を簡単に調整する方法

ブロック間の余白を調整するときに大活躍するスペーサーブロックですが、毎回スペーサーブロックを呼び出すのは地味に面倒です。

そこで、スペーサーブロックを使わずにブロック間の余白を簡単に調整することができる機能を持ったWordPressテーマとプラグインを紹介します。

紹介するのは以下の2製品です。

  • SWELL ※テーマ
  • Arkhe Blocks ※プラグイン

それぞれ紹介していきます

SWELLの「ブロック下の余白」設定機能

WordPressテーマ『SWELL』
』公式サイト

ブロックエディター完全対応のWordPressテーマ『』では、ブロック下の余白」を調整できる機能がブロックツールバーに追加されます。

ブロックツールバーとは、ブロックを選択した際に表示されるツールバーのことです。

ブロックエディターのブロックツールバー

SWELLのブロックツールバーの以下赤枠部分が「ブロック下の余白」ボタンです。

SWELLのブロック下の余白設定機能

ここから、余白を調整したいブロックを選択した状態で簡単に余白を調整できます。

実際にブロック下の余白を調整している動画を用意しました。

さとしん

スペーサーブロックを追加しなくて良いのはかなり便利です…!

\ ブロックエディターの使い心地が最高 /

SWELLについては以下の記事も見てみてください。

Arkhe Blocksの「ブロック上の余白」設定機能

WordPressテーマ『Arkhe』
Arkhe』公式サイト

公式ディレクトリにも掲載されているプラグイン『Arkhe Blocks』にはブロック上の余白」を調整できるボタンがブロックツールバーに追加されます。

さとしん

Arkhe BlocksはSWELLと同じ開発者さんのプラグインです…!

SWELLとは逆で、選択したブロックの上の余白を自由にコントロールできます。

ブロックツールバーの以下赤枠部分がArkhe Blocksの「ブロック上の余白」ボタンです。

Arkhe Blocksのブロック上の余白設定機能

こちらも実際にブロック上の余白を調整している動画を用意しました。

さとしん

プラグインなので導入も比較的容易で助かりますね…!

\ ブロックエディターが高機能に進化! /

Arkhe Blocksについては以下の記事も見てみてください。

余白を調整して見やすいコンテンツを作りましょう!

ブロック間の余白を調整することができる「スペーサーブロック」の使い方をご紹介しました。

見やすいコンテンツを作るために「余白」はとても大切な要素です。

さとしん

うまく余白を活用していきたいですね…!

また、スペーサーブロックを使わずに余白を調整することができる機能を持ったテーマとプラグインもご紹介しました。

スペーサーブロックを毎回配置するのが面倒という場合は、これらの製品を使うことで手間が減ってかなり時短にもなるのでおすすめです。

適度に余白を使い分けながら、見やすいコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLのブロックエディターを紹介した記事

Arkhe Blocksプラグインを紹介した記事

ブロックエディターの基本的な使い方

ブロックエディターのショートカットキーまとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる