for Admin
フロントの Admin Bar を、必要な時だけ表示。
スクリーンショットやデザイン確認の邪魔になる Admin Bar を、普段はすっきり隠して、必要な時だけ呼び出せる軽量プラグインです。フロントには Show ボタンやトグルアイコンを一切表示せず、Admin Bar を隠している間は上部余白も残しません。固定ヘッダーや追従ヘッダーのあるサイトとも、できるだけ自然に共存できるよう設計しています。
TeenyBar は WordPress.org 公式プラグインディレクトリで公開されています。WordPress 管理画面の「プラグイン > 新規追加」から「TeenyBar」で検索・インストールできます。
PROBLEM
ログイン中のフロント、Admin Bar が邪魔になっていませんか?
スクリーンショットに写り込む
クライアント確認用のスクリーンショットを撮ると、画面上部に Admin Bar が常に写ってしまう。提出前にトリミングする手間が地味に積み重なります。
隠してもページ上部に余白が残る
Admin Bar を CSS で隠しただけだと、ページ側には Admin Bar の高さぶんの余白が残ったまま。ファーストビューやヘッダーの本来の見え方が確認できません。
固定ヘッダー・追従ヘッダーと重なる
固定ヘッダーやスクロール後に出てくる追従ヘッダーが、Admin Bar と上下で重なってしまう。本番の見た目と、ログイン中の見た目がズレてしまいます。
トグル式プラグインだと Show ボタンが写る
従来の MiniBar 系プラグインで隠しても、結局フロントには Show ボタンやアイコンが残り、それ自体がスクリーンショットに写ってしまいます。
SOLUTION
隠している時は「隠れている見た目」、必要な時だけ自然に呼び出す。
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.4
WordPress.org で公開しました
TeenyBar は WordPress.org 公式プラグインディレクトリで公開されました。初回公開版は v0.4.4 で、Plugin Check にも対応しています。
WordPress.org 向けに、プラグイン名・スラッグを TeenyBar/teenybar 名義へ整理しています。これまでのアップデートで改善した「上部余白を残さない」挙動や、固定・追従ヘッダーとの重なり調整、「自動検出する」ボタンも、そのままお使いいただけます。
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 管理画面でプラグインを有効化します。
- 「設定 > 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
導入をご検討の方へ
TeenyBar は WordPress.org からインストールできます。WordPress 管理画面の「プラグイン > 新規追加」で「TeenyBar」と検索してください。導入や設定でご不明な点があれば、お問い合わせよりお気軽にご連絡ください。