標準ナビゲーションバーを消す(非表示にする)方法(新CSS)

アメブロの新CSS編集用デザインで、ヘッダー下の標準のナビゲーションバーを消す（非表示状態にする）カスタマイズ方法です。

ここで標準のヘッダーナビゲーションと呼んでいるのは、ブログタイトルやブログ説明文の下にある「ブログトップ」「記事一覧」「画像一覧」という各リンクと、ブログ内検索用のフォームが表示される部分です。

便利な機能がまとめられていますが、自前でグローバルナビを設置する場合などは、邪魔に感じることがあるかもしれませんので、CSSを使って隠してしまう方法をご紹介します。

なお、カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

標準ナビゲーションバーを消す(非表示にする)

標準ナビゲーションバーを消すには、CSSの末尾に以下のコードを追加して保存して下さい。

/************************************************
  新CSS：標準ナビゲーションバーを非表示にする
************************************************/
/* 標準ナビ非表示 */
.skin-blogHeaderNav {
  display: none;
}

これで、以下の画像のように、きれいサッパリ消えて（正確には「見えなくなって」）くれます。

ヘッダーとコンテンツ部の境界線を入れる

標準ナビゲーションバーを非表示にすると、ヘッダー部とコンテンツ部の間に、区切るものが何もなくなってしまいますので、もし境界線が欲しい場合は、さらに以下のようなコードをCSSの末尾に追加すれば表示できます。

/************************************************
  新CSS：ヘッダーとコンテンツ部の境界線
************************************************/
.skin-blogBody {
  border-top: 1px solid #e0e0e0;
}

まとめ

以上、アメブロの新CSS編集用デザインのヘッダー下にある標準ナビゲーションバーを消す（見えなくする、非表示にする）カスタマイズ方法をご紹介しました。

CSSにコピペだけの簡単な方法ですので、よかったら参考にして下さい。