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

Programming

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

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

スペーサーブロック

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

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

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

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

HTMLでも可能

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

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

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

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

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

余白の指定

  • margin > マージンに関する指定をまとめて行う
  • margin-top > 上マージンを指定する
  • margin-bottom > 下マージンを指定する
  • margin-left > 左マージンを指定する
  • margin-right > 右マージンを指定する
  • padding > パディングに関する指定をまとめて行う
  • padding-top > 上パディングを指定する
  • padding-bottom > 下パディングを指定する
  • padding-left > 左パディングを指定する
  • padding-right > 右パディングを指定する

brを連打でも一応可能

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

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


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

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました