アメブロの新CSS編集用デザインで、ヘッダー下の標準のナビゲーションバーを消す(非表示状態にする)カスタマイズ方法です。
ここで標準のヘッダーナビゲーションと呼んでいるのは、ブログタイトルやブログ説明文の下にある「ブログトップ」「記事一覧」「画像一覧」という各リンクと、ブログ内検索用のフォームが表示される部分です。
便利な機能がまとめられていますが、自前でグローバルナビを設置する場合などは、邪魔に感じることがあるかもしれませんので、CSSを使って隠してしまう方法をご紹介します。
なお、カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。
標準ナビゲーションバーを消す(非表示にする)
標準ナビゲーションバーを消すには、CSSの末尾に以下のコードを追加して保存して下さい。
/************************************************
新CSS:標準ナビゲーションバーを非表示にする
************************************************/
/* 標準ナビ非表示 */
.skin-blogHeaderNav {
display: none;
}
これで、以下の画像のように、きれいサッパリ消えて(正確には「見えなくなって」)くれます。
ヘッダーとコンテンツ部の境界線を入れる
標準ナビゲーションバーを非表示にすると、ヘッダー部とコンテンツ部の間に、区切るものが何もなくなってしまいますので、もし境界線が欲しい場合は、さらに以下のようなコードをCSSの末尾に追加すれば表示できます。
/************************************************
新CSS:ヘッダーとコンテンツ部の境界線
************************************************/
.skin-blogBody {
border-top: 1px solid #e0e0e0;
}
まとめ
以上、アメブロの新CSS編集用デザインのヘッダー下にある標準ナビゲーションバーを消す(見えなくする、非表示にする)カスタマイズ方法をご紹介しました。
CSSにコピペだけの簡単な方法ですので、よかったら参考にして下さい。