PR トラブル対策

AFFINGER6の「謎の余白」を消す！記事トップの画像やカバーブロックをヘッダー直下に配置する方法

ヘッダーのすぐ下に画像やカバーブロックを配置したいのに、意図しない余白ができてしまう…

このような悩みを解決します。

具体的には、
「カスタマイザーで設定したヘッダー画像はヘッダー直下に表示されるのに、WordPressのブロックエディタで配置した画像やカバーブロックだと、なぜか上に余白ができてしまう…」という問題の対処法をご紹介します。

カスタマイザーを使わず、カバーブロックなどでヘッダー周りのデザインを自由に作りたい方にぴったりの記事です。

この記事では、「記事トップの余白」を確実に0にするための具体的なCSSの解決策を、わかりやすく解説します。

なぜ記事トップに余白が発生するのか？

まず、この余白が発生する原因について解説します。

WordPressのブロックエディタやAFFINGER6のテーマは、コンテンツの可読性やデザインの一貫性を保つため、デフォルトでさまざまな余白（marginやpadding）を自動的に設定しています。

今回問題となる余白は、主に以下のいずれかの要因で発生している可能性が高いです。

メインコンテンツ領域のデフォルト余白

AFFINGER6は、記事や固定ページのコンテンツ全体を囲む主要な要素（例: #contentInner > main や .entry-content）に対して、上部に一定の余白を設定している場合があります。

これは、通常の記事コンテンツがヘッダーと適切な距離を保つために意図されたものです。

しかし、ヘッダー直下に大きな画像などを配置したい場合には、この余白が意図せず表示されてしまいます。

WordPressブロックのデフォルト余白

画像ブロック、カバーブロック、グループブロックなど、各ブロックにはデフォルトで上下のマージンが設定されていることがあります。

記事の一番上にこれらのブロックを配置した場合、そのブロックの「上側のマージン」がヘッダーとの間に隙間を作ってしまう可能性があります。

カスタマイザーで設定するヘッダー画像で余白が発生しないのは、テーマ側がその画像を「ヘッダーの一部」として扱い、余白を調整するCSSを適用しているためです。

一方で、ブロックエディタで配置した画像は「記事コンテンツの一部」と見なされ、上記のデフォルト余白が適用されてしまうという仕組みになっています。

解決策：追加CSSで余白を解消する

この余白を解消するには、WordPressの「追加CSS」機能を使用して、原因となっているCSSプロパティを上書きする必要があります。

WordPress管理画面の「外観」>「カスタマイズ」>「追加CSS」に進み、以下のCSSコードを記述してください。

カスタマイズ→追加CSS
ここにコードを貼り付ける

AFFINGER6 記事トップの余白を0にするCSS

/* メインコンテンツ領域の上部余白をリセット */
#contentInner > main {
    padding-top: 0 !important; /* 上部のパディングを強制的に0に */
    margin-top: 0 !important;  /* 上部のマージンを強制的に0に */
}

記事本文内の最初のブロック（カバーブロックなど）の上部余白もリセット

/* 状況に応じて上記CSSと合わせて効果を発揮する場合があります */
.entry-content > *:first-child,
.entry-content > .wp-block-cover:first-child,
.entry-content > .wp-block-group:first-child .wp-block-cover {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* .post.st-topin クラスを持つ要素の余白もリセット（サイト構造による） */
.post.st-topin {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

設定後の確認と注意点

  1. CSSの保存:
    「追加CSS」にコードを貼り付けたら、必ず「公開」ボタンをクリックして保存してください。
  2. キャッシュのクリア:
    設定を保存したら、ブラウザのキャッシュを完全にクリア（Windows: Ctrl + F5 / Mac: Shift + F5 など）して、再度ページを読み込んでください。
    ※WordPressのキャッシュプラグインを使用している場合は、そちらのキャッシュもクリアが必要です。
  3. 表示の確認:
    記事や固定ページを開き、ヘッダー直下の余白がなくなっていることを確認します。

注意点

!important は強力なCSS指定であり、既存のスタイルを強制的に上書きしますこれにより、他のCSSとの競合や予期せぬ表示崩れが発生する可能性もゼロではありません。しかし、今回の「どうしても消したい余白」に対しては非常に有効な手段です。

もし、将来的に他のページで意図しない表示崩れが発生した場合は、このCSSが原因でないか確認してみてください。

まとめ

AFFINGER6で記事トップの画像やカバーブロックの上部に発生する余白は、メインコンテンツ領域や特定のブロックに設定されたデフォルトの余白が原因であることがほとんどです。

今回ご紹介したCSSを追加CSSに記述することで、この余白を確実に0にすることができます。

もし、この記事の方法で解決しない場合や、他にCSSで調整したい箇所があれば、お気軽にお問い合わせください。

-トラブル対策
-,

PAGE TOP