【アドミンバー】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タグにクラスを付与しないとマージンを打ち消す事ができません。
なので本記事の通りクラスを付与してます。
アドミンバーを非表示にしたいという方はこちらの記事をご参考ください。
以上で解説を終わります。
目次
