こんにちは、パソコンインストラクターの川上雄大です。
みなさん、ご自分で頑張ってアメブロをカスタマイズしていらっしゃいますね^^!
やはり、自分でできるようになると嬉しいものですよね!
このような感謝のメッセージをいただいております↓
(略)
今、ブログのメニューを変更していまして、メニューバーのやり方を、四苦八苦していました。
専門用語とアルファベットにイライラしていましたら・・・どんだけ楽にできるの~!と、記事を発見!嬉しくなりました。^^
ありがとうございました
で、何とかメニューバーは、完成しましたが、ヘッダーの下の余白ができた?前からあったのか?よくわかりませんが、ヘッダー下の余白を失くす方法を、教えて頂くことはできますか?
(略)
よろしくお願い致します。^^
(略)
おお?
ヘッダー下の余白???
あ、コレですね↓
なるほど~!
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札幌・ライフデザインスクール
川上 雄大