ヘッダー下の余白をなくすには? | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンインストラクターの川上雄大です。

 

 

みなさん、ご自分で頑張ってアメブロをカスタマイズしていらっしゃいますね^^!

 

やはり、自分でできるようになると嬉しいものですよね!

 

 

このような感謝のメッセージをいただいております↓

 

 

(略)
今、ブログのメニューを変更していまして、メニューバーのやり方を、四苦八苦していました。
専門用語とアルファベットにイライラしていましたら・・・どんだけ楽にできるの~!と、記事を発見!嬉しくなりました。^^
ありがとうございましたニコニコ

で、何とかメニューバーは、完成しましたが、ヘッダーの下の余白ができた?前からあったのか?よくわかりませんが、ヘッダー下の余白を失くす方法を、教えて頂くことはできますか?
(略)
よろしくお願い致します。^^
(略)

 

 

 

おお?

 

ヘッダー下の余白???

 

あ、コレですね↓

 

 

 

なるほど~!

 

CSSを見てみましょう^^!!
 

 

あ、その前に、このデザインは何か?というと・・・

 

そう、プロフィール画像が四角いバージョンのデザインですね↓

(丸い画像であれば、また別のCSSになります。)

 

 

 

さてと・・・

 

CSSを見てみます↓

 

 

 

/* (3-2) ブログヘッダー

--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{background-color:#fffff;
height:300px ;
background-image:url(//stat.blogskin.ameba.jp/blogskin_images/20160311/09/89/ow/p/o09800300kyosyokusyou-kokufuku1457655686641.png);
background-repeat:no-repeat;
background-position:right;
margin-bottom:50px;

}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

 

あ、見つかりましたね!

 

 

そうそう、ココ(赤い文字)ですね。

 

 

/* (3-2) ブログヘッダー

--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{background-color:#fffff;
height:300px ;
background-image:url(//stat.blogskin.ameba.jp/blogskin_images/20160311/09/89/ow/p/o09800300kyosyokusyou-kokufuku1457655686641.png);
background-repeat:no-repeat;
background-position:right;
margin-bottom:50px;

}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

 

ヘッダーの下、余白が、50ピクセルあけていますね。

 

これを0ピクセルにします↓

 

 

 

/* (3-2) ブログヘッダー

--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{background-color:#fffff;
height:300px ;
background-image:url(//stat.blogskin.ameba.jp/blogskin_images/20160311/09/89/ow/p/o09800300kyosyokusyou-kokufuku1457655686641.png);
background-repeat:no-repeat;
background-position:right;
margin-bottom:0px;

}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

 

 

すると、

 

このように↓ヘッダー下の余白はなくなります。

 

 

 

さて、うまくカスタマイズできましたでしょうか^^!!!

 

 


以上、アメブロカスタマイズでした。


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大