Blogger Navbarを隠す新しい方法

久しぶりにNavbarを隠そうかと思い、クリボウさんのページを見て対応したところNavbarを隠すことができませんでした。
以前はできたはずなのに・・・
試行錯誤してみたところ、クリボウさんの記事を改良した新しい方法が分かったのでメモしておきます。
同じように困った方がいたら是非参考にしてみてください。

以前にNavbarの隠し方

クリボウさんの記事「BloggerのNavbarは隠してもいいらしい」に記載されているCSSを適用すると下記のようにタイトル上部が空白になりました。

比較用としてCSS適用前は↓のように黒いNavbarを設置していました。

Navbarを隠す新しい方法

Navbarを隠す新しい方法といってもクリボウさんの記事がベースになります。

1. テンプレート→HTMLの編集を開く
2. </head>を検索する
3. </b:template-skin>と</head>間に下記CSSを貼り付ける

<style type='text/css'>

#navbar-iframe,

#navbar {

height:0px;

visibility:hidden;

display:none;

}

</style>

新しい方法はCSSの設置場所とCSSに#navbarを新たに追加した点で、下記画像は実際に適用した状態です。

Navbarを隠すと

• 少しでも表示エリアを広くできる
• サイトがスッキリする

などの恩恵が得られますので、気になっている方は是非やってみてくださいね。