WordPressでサイト制作をしていると、ログイン時に表示される「管理バー（Admin Bar）」によって、ヘッダーがずれる現象に悩まされたこと、ありませんか？
これ、地味に厄介で、ログアウト時には問題ないのに、ログイン状態だとヘッダーが上にめり込んでしまうんです…。
「お客様から見たら問題ないからいいか…」で済ませていた時期もありましたが、
やっぱりブログを更新するクライアントさんが見る画面で崩れてるのは印象が悪いし、何より自分の気持ちがスッキリしない…。
今まではプラグイン「Admin Bar Position」で対処していたけど…
以前までは、以下のようなプラグインを使って、管理バーを下に移動させて対応していました。
▶ Admin Bar Position – 管理バーを下に移動するプラグイン
ただし、WordPress制作においては
- なるべくプラグインに頼らない
- 将来的なメンテナンス性も考慮したい
- サービス停止や更新停止での不具合を避けたい
という考えのもと、プラグインレスでの解決策を探していました。
CSSだけで解決！chatGPTに壁打ちして最適解を発見
いろいろ試した結果、CSSのみで以下のように書けば、あっさり解決できました！
/* 管理バーがあるときだけヘッダーを32px下にずらす */
body:has(#wpadminbar) .header {
top: 32px;
}
/* モバイル（782px以下）は管理バーの高さ46px分ずらす */
@media screen and (max-width: 782px) {
body:has(#wpadminbar) .header {
top: 46px;
}
}ポイントは、CSSの :has() 擬似クラスを使って、
- body内に#wpadminbarがあるかどうかを判定
- ログイン時のみヘッダーの位置を調整している、という点です。
このコードにより、JavaScriptを使うことなく、ログイン時だけ自動でヘッダーの位置を補正できます！
注意点：:has()は比較的新しいCSS機能
この :has() セレクタは、最近になってモダンブラウザに実装された機能のため、
IEには非対応です。（ただしIEはすでにサポート終了）
現在ではChrome / Edge / Firefox / Safariのすべてで問題なく動作するため、通常のWordPress運用サイトであれば安心して使えると思います。
よくある質問
Q. 管理バーの高さは何pxですか？
PC表示（783px以上）が32px、モバイル表示（782px以下）が46pxです。この2つの値でずれを補正します。
Q. header以外のクラス名でも使えますか？
使えます。.headerの部分を、position: fixed や sticky を指定している自分のヘッダーのクラス名に置き換えてください。
Q. :has()が使えないブラウザは？
IEは非対応ですが、すでにサポートが終了しています。Chrome・Edge・Firefox・Safariのモダンブラウザではすべて動作するので、通常のWordPress運用では問題ありません。
Q. プラグインを使う方法とどちらがいい？
CSSだけで解決できるなら、そのほうがおすすめです。プラグインは更新停止やサービス終了のリスクがあり、メンテナンス性でも不利になります。
まとめ：小さな違和感も、プラグインなしでスマートに解決しよう
管理バーによるヘッダーずれ、放置しても見た目が崩れるのはログイン時だけとはいえ、やっぱり気持ち悪いものです。
今回ご紹介したCSSだけの方法で、JavaScript不要・プラグイン不要でスッキリ解決できます。
私と同じように「地味に困ってた…」という方がいたら、ぜひ一度試してみてください！
