WordPress：謎の余白出現問題

WordPressのオリジナルテーマのデザイン変更をしていた際に出くわした、「@media screen and (max-width: 782px) html { margin-top: 46px !important; }。

自作のCSSにはそのような記載も782pxで指定したメディアクエリもなく途方に暮れていました。

Google検索やXで検索を重ねて、解決策にたどり着いたので記録します。

知らない余白出現

ポートフォリオサイトのリニューアルをしたので、WordPressのブログもデザインを合わせようと作業をしていました。

デスクトップサイズで見た時には問題なくレイアウトが反映されていましたが、モバイルサイズで見た時にheaderに異常発生。

以下の問題が発生していました。

  • headerの上に余白が空いている。
  • 余白は管理バーの縦のサイズと同じくらいのサイズ
  • 管理バーは余白の下に配置され、header内に重なって表示されている
  • ブログのタイトルは管理バーが上に重なった為、隠れている。

余白の正体

知らない余白が出現したので、Chromeの検証機能を使用して確認したところ、「@media screen and (max-width: 782px) html { margin-top: 46px !important; }」が入っていました。

自分で記述したCSSにはそのような記載はなく、困惑しました。

検証ツールで確認すると他にも「html {margin-top: 32px !important;}」という記述がありましたが、こちらも私が記述したCSSではありません。

しかしこちらは打ち消し線が入っていて、影響しているものではありませんでした。

原因究明

検証ツールで確認

「@media screen and (max-width: 782px) html { margin-top: 46px !important; }」の46pxの数値を検証ツールで弄るとmarginがなくなる事を確認。

原因はこれだろうと推測する。

しかしなぜ発生したのか、どのように解決すべきかは自分一人では分からない為、検索をしてみることにしました。

Google検索

次にGoogle検索を行いました。

Google検索で検索したワード

  • WordPress　header　謎の余白
  • WordPress HTML 余白 自動で入る
  • WordPress 管理バー上に空白
  • WordPress 管理バーの上 余白 理由

上記の検索結果を試しましたが、こちらでは解決はできなかったです。

しかし様々な要因が関係している可能性があることと、簡単に原因究明できるものではない可能性がある事を知れたので、勉強になりました。

X(旧：Twitter）で検索

Google検索ではたどり着かなかったので、次は同じようなことに悩んでいる人が悩みを発信している可能性があるだろうとXで検索をしました。

xで検索したワード

  • ヘッダー　空白
  • WordPress 管理バー
  • WordPress html 空白
  • WordPress html margin

上記のワードで検索したところ、最後の「WordPress html margin」でhitしました。

＊学習ログ等今回は関係のない内容もhitしましたが、これで解決のヒントととなったWEBサイトのurlを投稿している人が多数いらっしゃいました。

解決！

皆さんが参考にされているウェブサイトは下記になります。

KUBOGEN | WordPressでhtmlのmargin-topに32pxがimportant指定されるときの対処

https://kubogen.com/web-wordpress-056/

記事の内容を参考にfunctions.phpにコードを追加しましたが、私の場合はこちらのコードをコピペでは上手くいかず、以下のように変更した所、無事headerの上に生じた空白と管理バーは消えました。

add_filter('show_admin_bar', '__return_false');

＊コピペでは「add_filter(‘show_admin_bar’, ‘__return_false’);」なのですが、「‘」と「’」がVScode上でエラー表示になったので、「’」に変更しました。

原因はWordPressの仕様

参考にさせていただいた、WEBサイトの情報では原因はWordPressの仕様という事でした。

それは知らない余白が出現するはずですね。

とても助かりました。

今回は解決しましたが、私にもっと技術や知識があれば管理バーがあるまま余白を消せた可能性があるのでは…とも考えてしまいます。

今後の学習で不明点をもっと知りたいと思いました。

知識を増やして根本的な原因や管理画面を消したことで解決としてよい問題なのかを知っていけたらと思います。

追記：現在WordPressの記事のレイアウトを修正中です。お見苦しい箇所があり、申し訳ございません。