アメブロバー（アメーババー）非表示、色変更のカスタマイズ

前回、userNaviArea（ユーザーナビエリア）

を消して、ブログ上部をスッキリさせました。

その上にはアメブロバー（アメーババー）があります。

このバーは、

私は便利なので残して利用していますが

いかにもアメブロ、と言う感じがするという方には

非表示や色を変えるカスタマイズが出来ます。

アメブロバーを非表示

/*----------アメブロバー----------*/
#amebaBar{
display: none;
visibility: hidden;
}

これで、
アメブロバーの表示を消すことが出来ます。

アメブロバーの背景色を変える

私のように残したいけれれど

背景色と合わないから、色変更のカスタマイズをするには

/*----------アメブロバー----------*/
ul#amebaBar{
margin:0 auto;
border:none;/* バーの下の区切り線を消す */
background-color: #ac0202;/* 背景色の色を指定 */
}

これをCSSに追加すれば

アメーババーのカスタマイズが出来ます。

アメブロバーは

マイページに行ったり、ブログ記事を書くときのリンクとして便利なので、

色変更のカスタマイズがオススメです。

ユーザーナビエリア（userNaviArea）を消すカスタマイズ

アメブロのカスタマイズのはじめとして、

アメブロのヘッダの上に、ついている

アメブロID ／ルーム／ブログ／などのリンク、スペースをとる方法です。

せっかくヘッダ画像を綺麗なオリジナル画像に変えても

スペースがあれば、台無しです。

アメブロのカスタマイズは、CSSの変更でしますので、

CSS変更可能なスキンを選択してください。

スタンダードの

「グリーン、ブルー、ピーチ」などCSS変更可能なスキンです。

選択前に、

既存のスキンのCSSは、もしもの場合に備え

バックアップしておいてください。

することは簡単です。

バックアップできたら始めます。

アメブロの管理画面、

【デザインの変更】から【スキンCSSの編集】

に進みます。

CSSの画面になりますので、

上部でも、下部でもいいので、

#userNaviArea{
display: none;
visibility: hidden;
}

を加えてください。

今回のカスタマイズは

userNaviArea（ユーザーナビエリア）を

表示させずに隠す。と言う指示です。

わかりやすいように

/*-----------------------------------------------------
アメブロ、ユーザーナビエリア変更
-----------------------------------------------------*/

#userNaviArea{
display: none;
visibility: hidden;
}

とした方が、後からのカスタマイズで

わかりやすくなります。

付け加えたら、【保存】。

すると

のように、

ヘッダ上部のuserNaviArea（ユーザーナビエリア）が無くなり、

すっきりとしたトップページにカスタマイズできます。

今回は、userNaviArea（ユーザーナビエリア）の削除

というアメブロカスタマイズでした。

簡単なので、まず始めてみて下さいね。