ブロックとブロックの間隔をスペーサーを使って調整する

広告

ブロックエディタで複数のブロックを追加している場合、ブロックとブロックの間隔を調整するには「スペーサー」ブロックを使用します。「スペーサー」ブロックは空白のブロックで設定した高さの分だけ何もない空間を作ることができます。ここでは WordPress でブロックエディタを使用している場合に、ブロックとブロックの間隔を「スペーサー」ブロックを使って調整する方法について解説します。

ブロックとブロックの間の間隔を調整する

ブロックとブロックの間の間隔を調整したい場合には「スペーサー」ブロックを利用します。このブロックは指定した高さを持つ空白のブロックです。ブロックとブロックの間に「スペーサー」ブロックを追加することで、ブロック間の間隔を空けることができます。

例として新しい記事を作成し 3 つの段落ブロックを追加しました。

ブロックとブロックの間の間隔を調整する(1)

プレビューを見てみると次のように表示されます。

ブロックとブロックの間の間隔を調整する(2)

それでは 1 つ目と 2 つ目の段落の間隔を広げてみます。ブロックとブロックの間にマウスをあわせると表示される「+」アイコンをクリックしてください。

ブロックとブロックの間の間隔を調整する(3)

ブロックタイプを選択する画面が表示されるので「レイアウト要素」の中にある「スペーサー」ブロックをクリックしてください。

ブロックとブロックの間の間隔を調整する(4)

「スペーサー」ブロックが追加されます。

ブロックとブロックの間の間隔を調整する(5)

「スペーサー」ブロックが追加されたら、ブロックの下部に表示されている青い線にマウスをあわせて上下にドラッグしてブロックの高さを調整してください。

ブロックとブロックの間の間隔を調整する(4)

ブロックとブロックの間の間隔を調整する(4)

「スペーサー」ブロックは空白のブロックなので、「スペーサー」ブロックの分だけその前後のブロックの間隔が開いて表示されます。「スペーサー」ブロックの高さの調整が終わりましたらプレビューを確認してみてください。

ブロックとブロックの間の間隔を調整する(5)

ブロックとブロックの間の間隔を調整する(6)

「スペーサー」ブロックの分だけブロックとブロックの間隔が広がっています。

-- --

WordPress でブロックエディタを使用している場合に、ブロックとブロックの間の間隔を「スペーサー」ブロックを使って調整する方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。