Gutenbergのスペーサーでmargin（余白）を付ける方法

今回はWordPressの標準エディタである「Gutenberg」を使って意図的に余白（margin）を付ける方法について紹介します。

Gutenbergは基本的にブロックを空白にしてもプレビュー上では空白になっていません。marginをつけていきたい場合はそれ専用のブロックを使用します。

スペーサーブロック

Gutenbergでmarginを付けるにはブロック選択→レイアウト要素→スペーサーで可能です。

スペーサーブロックを展開すると下記の様に灰色のブロックが現れます。この部分が余白（margin）になります。また余白の大きさは左側の「余白の設定」の数値を変えることで調整が可能です。

下記の青枠内は実際にスペーサーブロックを使用した余白です。

HTMLでも可能

余白を付けたいブロックの「⁝」をクリックして「HTMLとして編集」を選択します。

HTML記述の最初の要素に「style=”margin: 200px;”」を付ければ完了です。

この上に余白を付けます。実際の記述は下記。

<p style="margin-top: 200px;">この上に余白を付けます。実際の記述は下記。</p>

また、余白の付け方は下記の様に色々あります。marginの場合は要素の外側、paddingの場合は要素の内側に余白を付けることが出来ます。

brを連打でも一応可能

これはあまり推奨しない方法だが、pブロック内でShift +Enterで改行タグ（br）を連打してテキストを付けなければ見た目上は同じことが可能です。

ただスマホ時とPC時でのギャップが超大きくなりますし調整が不可能なのであえてこの方法を使う必要はありません。

以上が「Gutenbergのスペーサーでmargin（余白）を付ける方法」でした。

スペーサーブロックを使えば簡単にmarginを付けれてレイアウトを調整する事が出来ます。WEB制作では無理な要望を聞く際などに意外と多く使うブロックなので覚えておきましょう。