アメブロのヘッダー下ナビゲーションバーを消す(表示しない)方法

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロのCSS編集用デザインでは、ヘッダー下にデフォルトでナビゲーションバーが表示されるようになっています。

ブログタイトルやブログ説明文の下にある「ブログトップ」「記事一覧」「画像一覧」の各リンクおよび、ブログ内検索用のフォームが表示される部分です。

このナビゲーションバーは便利ではありますが、ヘッダー下に自前でグローバルナビゲーションメニューを設置した場合などに、邪魔に感じるかもしれません。

そのような場合、カスタマイズで簡単に消す(非表示にする)ことができますので、その方法をご紹介したいと思います。

ヘッダー下にあるデフォルトのナビゲーションバーを消す(表示しない)

ヘッダー下ナビゲーションを消す(非表示にする)方法

今回は、アメブロのブログデザインCSSの編集でカスタマイズを行いますので、やり方がわからない場合は先にチェックしておいて下さい。

CSS編集用デザインを適用したアメブロでデフォルトのナビゲーションバーを消すのは簡単です。

ブログデザインCSSに以下のコードを追加して保存しましょう。

.skin-blogHeaderNav {
  display: none;
}

これだけです。

これで、下記画像のように、きれいサッパリ消えてくれます。

ヘッダー下にあるデフォルトのナビゲーションバーを消す(表示しない)と

注意点

ただし、今回の方法では、あくまでも見た目で表示されなくなったつまり存在はしているが非表示の状態になっただけです。

ですので、存在していない前提で他のカスタマイズを行おうとするとうまくいかない場合がありますので、どうぞご注意下さい(カスタマイズ手法を考案する場合など以外では問題になることは少ないと思いますが)

まとめ

以上、アメブロのヘッダー下にデフォルトで表示されているナビゲーションバーを消す(表示しない・非表示にする)カスタマイズ方法についてご紹介しました。

よかったら参考にしてみて下さい。

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す