アメブロのヘッダーナビとヘッダー画像の間に余白が空いてしまい、デザインが崩れて気になるということがあるかもしれません。
実はこの隙間、下の画像のようにCSSの編集で簡単に消すことが出来ます。
上のようにアメブロのヘッダー余白を消す方法は、下記のCSSをCSS編集の一番下に貼り付けるだけで実現できます。
CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。
アメブロのヘッダー余白を消すCSS
/***************************************
ヘッダー余白消し
by 3910GO http://blog-customize.3910go.com/
***************************************/
/* ▼ ヘッダー余白消し (ここから) ▼ */
.skinHeaderArea{
margin-top:-22px;
}
/*▲ ヘッダー余白消し (ここまで) ▲ */
または、
/***************************************
ヘッダー余白消し
by 3910GO http://blog-customize.3910go.com/
***************************************/
/* ▼ ヘッダー余白消し (ここから) ▼ */
.skinFrame {
padding-top: 0px;
}
/*▲ ヘッダー余白消し (ここまで) ▲ */
どちらともヘッダーにある22pxの余白を消す役目を果たしますので、どちらか一方のみCSS編集の一番下に貼り付ければ、ヘッダー部分の余白を消すことが出来ます。
気になっていた方は、ぜひ試してみて下さい。