WordPress Plugin ／ 無料・軽量
WP TeenyBar
フロントの Admin Bar を、必要な時だけ表示。
スクリーンショットやデザイン確認の邪魔になる Admin Bar を、普段はすっきり隠して、必要な時だけ呼び出せる軽量プラグインです。フロントには Show ボタンやトグルアイコンを一切表示せず、Admin Bar を隠している間は上部余白も残しません。固定ヘッダーや追従ヘッダーのあるサイトとも、できるだけ自然に共存できるよう設計しています。
PROBLEM
ログイン中のフロント、Admin Bar が邪魔になっていませんか？
スクリーンショットに写り込む
クライアント確認用のスクリーンショットを撮ると、画面上部に Admin Bar が常に写ってしまう。提出前にトリミングする手間が地味に積み重なります。
隠してもページ上部に余白が残る
Admin Bar を CSS で隠しただけだと、ページ側には Admin Bar の高さぶんの余白が残ったまま。ファーストビューやヘッダーの本来の見え方が確認できません。
固定ヘッダー・追従ヘッダーと重なる
固定ヘッダーやスクロール後に出てくる追従ヘッダーが、Admin Bar と上下で重なってしまう。本番の見た目と、ログイン中の見た目がズレてしまいます。
トグル式プラグインだと Show ボタンが写る
従来の MiniBar 系プラグインで隠しても、結局フロントには Show ボタンやアイコンが残り、それ自体がスクリーンショットに写ってしまいます。
SOLUTION
隠している時は「隠れている見た目」、必要な時だけ自然に呼び出す。
WP TeenyBar は、ログイン中のフロントで Admin Bar を初期非表示にします。隠している間は WordPress 標準の Admin Bar 用余白も残さないので、ログアウト時に近い見た目でサイトの上端まで確認できます。
設定したホットゾーン（左上の角／上の端／右上の角）にマウスを近づけたときだけ Admin Bar が表示され、そのときだけサイト側を Admin Bar の高さ分（PC は 32px、モバイルは 46px）下にずらします。マウスを外すと再び Admin Bar は隠れ、上余白も 0 に戻ります。
固定ヘッダーや、スクロール後に現れる追従ヘッダーがあるサイトでも、Admin Bar 表示中だけ対象のヘッダー位置をやさしく調整するモードを用意。普段は通常の見た目、必要な時だけ Admin Bar とヘッダーが重ならない位置関係に整える、という考え方です。管理画面（wp-admin）では Admin Bar は通常通り表示されます。
WHAT'S NEW ／ v0.4.0
v0.4.0 のアップデート
v0.4.0 では、Admin Bar を隠しているのに上部余白だけが残ってしまう問題や、固定・追従ヘッダーとの重なりを改善しました。さらに、固定・追従ヘッダーの候補を探せる「自動検出する」ボタンを追加し、CSS に詳しくない方でも設定しやすくなっています。
実機では 日本語教師ルート と 資格ラボ で確認しています。日本語教師ルートでは、これまで Admin Bar を隠してもヘッダー上に 32px ほどの空白が残っていたのが解消され、表示中だけページが下がり、マウスを外すと余白も 0 に戻ることを確認しました。資格ラボでは、スクロール後に出現する追従ヘッダーと Admin Bar の重なりが軽減され、「自動検出する」での候補抽出も動作しています。
FEATURES
主な機能
フロントには何も表示しない
Show ボタン・トグル・アイコンを一切描画しません。スクリーンショットやデザイン確認に余計な UI が写り込みません。
ホバーで表示
指定したホットゾーンにマウスを近づけたときだけ Admin Bar をスライドダウンで表示。マウスを外すと自動で隠れます。
表示エリアを選べる
「左上の角」「上の端」「右上の角」の3種類から、呼び出し位置を選択できます。サイトのデザインや使い方に合わせて調整可能です。
上余白を残さない
Admin Bar を隠している間は、WordPress 標準の Admin Bar 用余白も抑え、ログアウト時に近い見た目でフロントを確認できます。
固定・追従ヘッダーに対応
固定ヘッダーやスクロール後に出現する追従ヘッダーでも、Admin Bar 表示中だけ位置を調整し、重なりを減らします。固定状態でないときには、不要にずらさない設計です。
自動検出で設定しやすく
「自動検出する」ボタンで固定・追従ヘッダーの候補を探し、CSS セレクタ欄に反映できます。自動保存はせず、内容を確認してから「変更を保存」する流れです。
表示・非表示ディレイ設定
Admin Bar を表示するタイミング、隠すタイミングを調整できます。出すぎる・すぐ消えすぎるといった操作感を、サイトに合わせて整えられます。
背景色を変更可能
Admin Bar の背景色をカラーピッカーで自由に変更。サイトのトーンに合わせて、目立ち過ぎないように調整できます。
管理画面では通常表示
wp-admin 側には一切干渉しません。Admin Bar はこれまで通り常時表示され、ダッシュボード作業に支障はありません。
HOW TO USE
使い方
プラグインを有効化したらすぐに使えます。最初は既定値のままで OK、必要に応じてだけ細かい設定を触る流れです。
- WordPress 管理画面でプラグインを有効化します。
- 「設定 > WP TeenyBar」を開きます。
- 表示エリア（左上の角／上の端／右上の角）と、適用対象、背景色を選びます。
- フロント画面を開き、選んだ表示エリアにマウスを移動します。Admin Bar が表示され、マウスを外すと自動で隠れます。
- 固定ヘッダーや追従ヘッダーが Admin Bar と重なる場合は、「自動検出する」ボタンを押して候補を抽出し、CSS セレクタ欄に反映します。内容を確認してから「変更を保存」してください。
- Admin Bar の出方・消え方が気になる場合は、表示ディレイ・非表示ディレイを調整します。
※ 固定ヘッダー CSS セレクタ欄が空欄のときは、固定ヘッダー互換モードは実質 OFF として扱われます。最初は空欄のままで動作確認 → 必要だと感じたら自動検出を試す、という順序で問題ありません。
FOR
こんな方におすすめ
WordPress サイト制作者
制作中のサイトをログイン状態のままチェックする機会が多く、Admin Bar に上から押し下げられる前提でデザイン確認したくない方に。
Web デザイナー
ファーストビューや上端の見え方を、本番に近い状態で繰り返し確認したい方。Admin Bar を隠しても上余白が残らないので、本番に近い見た目で検証できます。
クライアント提出用のスクリーンショットを撮る方
毎回 Admin Bar をトリミングするのが面倒な方、Show ボタンの写り込みも気になる方に。撮影前にログアウトし直す手間も減ります。
固定・追従ヘッダーのあるサイトを運用している方
固定ヘッダーやスクロール後に出てくる追従ヘッダーが、Admin Bar と上下で重なって見た目が崩れる──そんなサイトでも、Admin Bar を隠している間は通常の見た目を保ち、表示中だけ位置を調整します。「自動検出する」ボタンで設定の取っ掛かりがつかみやすく、CSS に詳しくない方でも整えやすくなっています。
管理バーは必要だが、普段は隠したい方
編集リンクや「サイトを表示」の導線は残したい。けれど普段はすっきりさせたい、という方向け。隠す／出すのタイミングはディレイ設定で調整できます。
CONTACT
導入をご検討の方へ
現在は限定公開で配布しています。今後 WordPress.org への登録も予定しています。導入をご希望の方や、自社サイトでの動作についてご相談がある方は、お問い合わせよりお気軽にご連絡ください。