Written by Kasumi

【アドミンバー】WordPressで管理画面にログインしたらページ上部に余白ができるのを解決!

WordPressにログイン後、webページを確認すると上部にアドミンバー(メニュー)が出て余白ができる。

アドミンバーは表示しつつ、管理画面にログインしても余白が現れないようにしたい。

本記事ではCSSを使ってこのような悩みを解決します。

htmlタグにクラスを付与

<html class="sr" lang="ja">

htmlタグに何でも良いですがクラスを付けます。

本記事では例としてsrクラスを付与します。

CSS

//付与したクラスをhtmlに連結
html.sr {
  margin-top: 0!important;
}

#wpadminbar {
  z-index: 10000000!important;
}

後は上記CSSをあてればOKです。

以上の流れで余白を無くす事が出来ます。

まとめ

余白ができる原因としては、WordPress管理画面にログインすると強制的にhtmlタグにmargin-top: 32px !important;が付与されるからです。

!importantが使われてる事から、htmlタグにクラスを付与しないとマージンを打ち消す事ができません。

なので本記事の通りクラスを付与してます。

アドミンバーを非表示にしたいという方はこちらの記事をご参考ください。

以上で解説を終わります。

目次

関連記事

WordPress

WordPressで使われてるエディタ(ブロックorクラシック)によってif文で条件分岐する方法

2022.10.30
746
WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
6331
WordPress プログラミング

ワードプレスのツールバー(アドミンバー)を表示・非表示にする方法

2020.05.29
780
HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
8927