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の空白解決

まとめ

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

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

wordpress

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


本記事のシェアはこちらから!

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

PROFILE

yoshi

follow us in feedly

WEB制作をやっているYoshiと申します。PVは月間10万程度。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。