Wordpress のバーを少し透かしてみた

少し前のお話しになりますが・・・

WordPress 3.9 以降ですと、Wordpress のバーはフラットデザインの黒いバーになります。

今回お客様の WordPress のテーマを作るにあたり、ちょっとした遊び心でバーの色をちょっと透明にしてみました。

CSS

@media screen and (min-width: 783px){

	#wpadminbar{
		background-color: rgba(34,34,34,.8);
	}

	#wpadminbar .ab-top-menu > li:hover > .ab-item,
	#wpadminbar .ab-top-menu > li > .ab-item:focus,
	#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
	#wpadminbar .menupop .ab-sub-wrapper{
		background-color: rgba(51,51,51,.75);
	}
	
}

@media screen and (min-width: 783px){

#wpadminbar{

background-color: rgba(34,34,34,.8);

}

#wpadminbar .ab-top-menu > li:hover > .ab-item,

#wpadminbar .ab-top-menu > li > .ab-item:focus,

#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,

#wpadminbar .menupop .ab-sub-wrapper{

background-color: rgba(51,51,51,.75);

}

解説

Q. なぜ 783px 以上のメディアクエリーがあるのか？
タブレット以下になると、Wordpress のバーは上部固定ではなくなってしまいます。そうなると半透明である理由がなくなってしまうので、783px 以上限定にしています。
ただ position: fixed; を掛ければまたいい話なんですけどね・・・
あの長い 7 〜 13 行目のCSSは？
上部バーから展開するプルダウンにも適用させるための CSS です。上部バーよりも若干明るく・薄くしています。