WordPress 管理者メニュー #wpadminbar (body クラス .admin-bar) のメディアクエリ切り替えポイント(px)

スポンサーリンク

WordPressにログインしている状態では画面上部に管理者メニュー #wpadminbar(以下、.admin-bar)が表示されますが、CSSでpositionプロパティでfixedやstickyにて固定する際に.admin-barと重なってしまう場合があります。

.admin-barに対応したCSSを作成するために、メディアクエリ(@media)の切り替えポイント(px)とメディアクエリの例(CSSソースコード)について備忘録として残します。

WordPress 6.0.1にて検証しています。WordPressのバージョン・テーマにより異なる可能性があります。

.admin-bar のメディアクエリ(@media)切り替えポイント(px)について

WordPressの.admin-barは画面サイズによって高さが可変します。また、画面サイズによってヘッダー上部に固定されます。

以下が高さと固定の可変域をまとめたものです。

メディアクエリ.admin-barの高さ固定
〜600px46px×
601px〜46px
783px〜32px

.admin-bar のメディアクエリ(@media)ソースコード例

例えば、以下のソースコードでは、テーブルのヘッダーセクション(table thead tr th)に対してクラス.stickyを追加しpositionプロパティstickyを適用、スクロールに応じてテーブルのヘッダーセクションを画面上部に固定しようとするものです。

table thead tr th.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
table thead tr th.sticky::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 100%;
	height: 100%;
	border: 1px solid #eee;
}
@media screen and (min-width: 601px) {
	body.admin-bar table thead tr th.sticky {
		top: 46px;
	}
}
@media screen and (min-width: 783px) {
	body.admin-bar table thead tr th.sticky {
		top: 32px;
	}
}

テーブルのヘッダーセクションを固定するには table thead tr th.sticky(table thead tr th.sticky::before)の記述のみで問題ありませんが、その場合は.admin-barと重なってしまいます。

.admin-barは601pxからヘッダーに固定されますので、@media screen and (min-width: 601px) 画面サイズが601px以上の場合はtopプロパティで46pxを適用、@media screen and (min-width: 783px) 画面サイズが783px以上の場合はtopプロパティで32pxを適用することで.admin-barとの重なりを回避することができます。

コメント

タイトルとURLをコピーしました