目次

【アメブロカスタマイズ】標準ナビゲーションバーを消す(非表示にする)方法

「新CSS編集用デザイン」向けです

アメブロの新CSS編集用デザインでは、ヘッダー下に標準のナビゲーションバーが表示されます。

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

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

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

CSSの編集をしますので、やり方がわからない場合は先にチェックしておいて下さい。

ヘッダー下ナビゲーションを消す(見えなくする)

標準ナビゲーションバーを消す(見えなくする)には、CSSの末尾に以下のコードを追加して保存すればOKです。

.skin-blogHeaderNav {
  display: none;
}

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

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

.skin-blogBody {
  border-top: 1px solid #e0e0e0;
}

まとめ

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

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