VK Blocks のレスポンシブスペーサーには余白タイプが「height」「margin-top」「margin-bottom」から選べるようになっています。
この設定による特性の違いについて解説します。
margin-top は親要素の高さに反映されません
以下のように、例えば灰色の背景のグループブロックの中の上部にレスポンシブスペーサーを入れた場合、編集画面上ではグループブロックの中にスペーサーが入りますが、公開画面側では、margin-top の余白はグループブロックを突き抜けて上側につきます。
管理画面での表示
上のブロック要素
margin-top : 親のグループブロックの高さを保持しない（管理画面では保持します）
公開画面での表示
上のブロック要素
margin-top : 親のグループブロックの高さを保持しない（管理画面では保持します）
このように背景の灰色の部分の高さを検出しないで、その上に余白ができてしまいます。
height は親要素の高さに反映されます
管理画面での表示
上のブロック要素
height : 親のグループブロックの高さを保持します
公開画面での表示
上のブロック要素
height : 親のグループブロックの高さを保持します
height に指定すると親要素の中に余白が収まります。
枠線があるとmargin でも中に高さがつきます
親要素に枠線があったりする場合は、中のスペーサーが margin-top でもグループ内に高さがつくようになります。
margin-top : 枠線があると margin-top でも高さを保持します
height : 外の要素の高さを保持します
margin-top と height の使い分け
結局どちらを使えば良いのかはケースバイケースですが以下の違いがあります。
| margin の場合 | 上の要素の margin-bottom と 下の要素の margin-top で大きい方の余白になる |
| height の場合 | 上の要素に margin-bottom がある場合、その下に height のスペーサーがあると、margin-bottom と height の合計の余白になる |
margin の場合
管理画面での表示
margin-bottom サイズ S の段落
↑ スペーサー margin-top : M → 大きい方の余白（M）になります。
margin-bottom サイズ L の段落
↑ スペーサー margin-top : M → トータルで大きい方の余白（L）になります。
公開画面での表示
margin-bottom サイズ S の段落
↑ スペーサー margin-top : M → 大きい方の余白（M）になります。
margin-bottom サイズ L の段落
↑ スペーサー margin-top : M → トータルで大きい方の余白（L）になります。
height の場合
管理画面での表示
margin-bottom サイズ S の段落
↑ スペーサー margin-top : M → S + M の余白になります。
公開画面での表示
margin-bottom サイズ S の段落
↑ スペーサー margin-top : M → S + M の余白になります。
このように margin を使うか height を使うかによって挙動が違いますので、用途に応じて使い分けてください。
※基本的にはブロック要素側の余白は 0 に指定して、スペーサーは height で扱うのが安定します。
この記事を書いた人
- 代表取締役
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。