少し前のお話しになりますが・・・
WordPress 3.9 以降ですと、Wordpress のバーはフラットデザインの黒いバーになります。
今回お客様の WordPress のテーマを作るにあたり、ちょっとした遊び心でバーの色をちょっと透明にしてみました。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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 です。上部バーよりも若干明るく・薄くしています。