【Cocoon】ブログの上下部分の黒いツールバーを非表示にする方法

WordPressログイン時に表示される上部の管理バーと、下部に表示されたツールバーが写ったブログ画面のスクリーンショット 初心者向けカスタマイズ集

WordPressの管理画面にログインした状態でブログを確認すると、画面の上下に黒いツールバーが表示されていることがあります。

作業中に常に表示されていると、ブログのデザインやレイアウトを確認しづらく、「訪問者にはどう見えているのか?」が分かりにくくなることもあります。

この記事では、ブラウザでブログを見た際、画面上部と下部に表示される黒いツールバーを非表示にする方法について、初心者にも分かりやすく解説しています。

Cocoon テーマを使っている場合は、上部だけでなく下部のツールバーも非表示にできますので、その手順もあわせて紹介します。

※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集(初心者向け)」のページをご参照ください。

上下の黒いツールバーとは

WordPressにログインした状態でブログを開くと、画面の上部に黒い管理バーが表示されます。

この管理バーは投稿編集画面や管理画面へ移動するためのショートカットとして用意された機能です。

管理バーが見えるのはログイン中の管理者だけで、通常の訪問者には一切表示されません。

また、Cocoon テーマを使用している場合は、画面の下部にも管理者向けのパネルが表示されています。

下部のパネルもブログ作成時の操作を効率化するために設計された補助機能です。

上下のツールバーが見えていてもブログが崩れているわけではなく、訪問者側には通常どおりのレイアウトで表示されています

ただしブログの見た目を確認したいときには上下のツールバーが邪魔になることがあります。

初心者の方は本来の見え方が判断しにくくなるため、必要に応じてツールバーを非表示にして確認することも可能です。

上部ツールバーの消し方

ブログの上部に表示される黒いツールバーは、プロフィール設定の変更だけで簡単に非表示にできます。

プロフィール設定で非表示に

まず、WordPress管理画面の左メニューから「ユーザー → プロフィール」をクリックします。

上下ツールバー非表示設定手順1

以下のプロフィール画面に、「サイトを見るときにツールバーを表示する」というチェック項目がありますのでこのチェックを外し、画面最下部の「プロフィールを更新」ボタンをクリックします。

すると、ブラウザ上で見た時に上部に表示されていた黒い管理バーが消えますので確認してみてください。

これでヘッダー部のデザイン確認がしやすくなり、ブログの見え方をそのまま確認できるようになります。

上下ツールバー非表示設定手順2

設定が反映されない場合の確認

もし設定を変更してもツールバーが残ってしまう場合は、ブラウザのキャッシュが原因になっていることがあります。

キャッシュを削除してからブログを再読み込みし、表示が変わったか確認してみてください。

また、複数のブラウザを使用している場合は、Chrome では非表示になっても Edge では表示されるというケースもあります。

その場合は、再度ログインし直した上で確認してみてください。

下部ツールバーの消し方

下部のツールバーは Cocoon テーマ独自の管理パネルで、WordPress 本体の設定では非表示になりません。

そのため、Cocoon 設定から表示をオフにする必要があります。

Cocoonの設定変更で非表示に

WordPress管理画面から「Cocoon設定 → 管理者画面タブ」をクリックします。

上下ツールバー非表示設定手順3

画面を少し下の方へスクロールすると、「管理者パネルの表示」という項目がありますので、初期設定の「PCのみ表示する」から「表示しない」に変更し、最後に「変更をまとめて保存」ボタンをクリックします。

上下ツールバー非表示設定手順4

設定後の表示確認

設定を保存したあと、ブログページを再読み込みして下部のツールバーが消えているか確認します。

もし表示されている場合は、キャッシュが残っている可能性があるため、ブラウザの更新(Ctrl+F5)を実行してみてください。

これで上下どちらのツールバーも非表示となり、訪問者と同じ見え方でブログを確認できるようになります。

レイアウトのずれや余白の調整もしやすくなるため、デザイン確認の精度が向上します。

まとめ

WordPressのログイン状態で表示される上下の黒いツールバーは、管理者用の便利な機能ですが、ブログのデザインを確認したいときには邪魔になることがあります。

上部のツールバーはプロフィール設定で簡単に非表示にでき、下部のツールバーはCocoon設定から「表示しない」に変更することで消すことができます。

上下のツールバーを非表示にすれば、訪問者と同じ状態でブログを確認できるため、デザイン確認やレイアウト調整がより正確に行えます。

あなたのブログ作成がより快適になるよう、ぜひ今回の設定を活用してみてください。

コメント

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