WordPressでページ最上部に空白marginが!importantで出る時の対処法

web制作

※この記事は、作成日より一年以上が経過しています。最新の情報ではありませんので、ご注意ください。

読了の目安時間: 127

こんにちはキヨタツです。
今日はwordpress(ワードプレス)のエラーと解決法を記事にします。

wordpressのページ最上部に生じる変な空白問題と解決法

問題の箇所

下記の画像が問題の現象。なぜかページ上部に謎の空白が生じています。
wordpressの空白問題

調査及び検討

デベロッパーツールでソースコードを見てみると、なぜかhtmlに直接スタイルシートが書かれており、「margin-top:32px !important;」と記述されています。そんなもん書いた覚えないぞ・・・??

よくよく調べてみると、そのコードはヘッダータグ終了直前に挿入しているwp_head();により読み込まれている様子。どういうことだってばよ・・・?

さらに調べてみると、答えが見つかりました。
どうやら「ワードプレスの管理画面のメニューバーの表示仕様」ということ。
あー、確かに。ちょうどあのメニューバーの収まりそうなサイズですわ。

▼ここにすべて詳しく書いてあります。
LIGさんの該当ブログ記事

解決法

キヨタツは下記で解決しました。

・wp_head();を削除する
 ただし、これは他のプラグインなどで必要な場合、動かなくなるので微妙です。

・関数による対処
LIGさんブログにならい、functions.phpに次の1行を追加したら機能させないようにできました。

add_filter( 'show_admin_bar', '__return_false' );

※phpの宣言文を忘れずに!

下記が解決した状態。ようやく落ち着きましたね。

wordpressの空白解決

まとめ

問題が起きたら、まずはデベロッパーツール。そして検索もしくはレッツトライ&エラーですね。そのうちにワードプレスの分かりやすい記事も書きますので参考にしてください!

今読んだ記事をシェアする

wordpress

WordPressでページ最上部に空白marginが!importantで出る時の対処法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。