PR 応用編

カバーブロックの間にできる余白を消す方法【簡単CSSで解決】AFFINGER6対応

カバーブロックを連続で使ったとき、上下に謎の余白ができてしまう…

そんな悩みを解決する方法を、AFFINGER6ユーザー向けにわかりやすく解説します。

なぜ余白ができるのか？

WordPressのカバーブロック（Coverブロック）には、デフォルトで上下にマージン（外側の余白）が設定されています。

このため、複数のカバーブロックを連続して配置すると、間にスペースが生まれてしまいます。

解決方法：CSSで余白を消す

次のコードを「外観 → カスタマイズ → 追加CSS」に貼り付けるだけでOKです。

/* カバーブロックの下マージンを削除 */
.wp-block-cover {
  margin-bottom: 0 !important;
}

これで、カバーブロック同士の余白が消えて、ぴったりとくっつくようになります。

上下とも余白をなくしたい場合

上下のマージンを完全になくしたい場合は、こちらのCSSに置き換えてください。

/* カバーブロックの上下マージンを削除 */
.wp-block-cover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

特定のカバーブロックだけ調整したい場合

おすすめ
ページ全体ではなく、一部だけで余白を消したい場合は、ブロックにクラスを付けて調整できます。

  1. カバーブロックを選択し、右側の設定パネル「高度な設定」→「追加CSSクラス」に no-gap-cover と入力。
  2. 以下のCSSを追加CSSに貼り付けます。
/* 特定のカバーブロックだけ下マージンを削除 */
.no-gap-cover {
  margin-bottom: 0 !important;
}

これで、no-gap-cover を指定したカバーブロックだけ余白が消えます。

この調整を使うべきケース

このカスタマイズは、基本的に以下のような場面での使用をおすすめします。

  • LP（ランディングページ）を作成していて、ビジュアルの連続性を持たせたいとき
  • ファーストビューの直下に画像や動画付きのブロックをくっつけて表示したいとき
  • セクション間に意図しない隙間ができてデザインが崩れるとき

メリットとデメリット

  • ブロックが詰まりすぎて窮屈に見えることがある
  • サイト全体に適用すると読みづらさにつながる
  • スマホ表示での見え方に注意が必要

まとめ

  • カバーブロックの余白はCSSで簡単にコントロール可能
  • ページ全体ではなく、必要な箇所だけに適用するのがおすすめ
  • デザイン性の高いLPやTOPページで活用しよう

AFFINGER6で「あとちょっと整えたい」部分を調整するCSSは、サイトのクオリティを一段引き上げてくれます。

デザインにこだわりたい方は、ぜひ活用してみてください。

-応用編
-, , ,

PAGE TOP