【アメブロカスタマイズ】お手軽どっこいしょリセットCSS

アメブロもしかり、

デザインカスタマイズをしていく為に、

不要スペース、配色が邪魔をします。


アメブロの元々のデザインをリセットしましょう。
リセットすることで、カスタマイズが快適になります。


▼▼とりあえずリセットしちゃえCSS

/*サイドメニュー*/
.skinMenuHeader,.skinMenuBody,.skinMenu{
padding:0px;
margin:0px;
}

/*記事エリア周辺*/
.skinArticle,.skinArticleHeader,.skinArticleBody2,.articleDetailArea{
padding:0;
margin:0;
}

/*サイドメニューヘッダー配色*/
.skinMenuHeader{
background:transparent;
}

/*記事エリアボーダーを消す*/
.skinArticle,.skinArticleHeader{
border:none;
}


/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:0px;
}


現状、私のデザインではこのくらいです。

【アメブロカスタマイズ】CSS Spriteアメブログローバルナビゲーション・メニュー

▼CSS Spriteとは…

複数の画像を一枚にまとめて、CSSで表示切り替えを行うことで、一枚の画像を使用するのでサイト表示の高速化が期待できます。

▼いいことばかりではありません（デメリット）
主にメニューボタンで使用されることが多いと思いますが、
一枚の画像で作られている為、メニューの追加、削除が手間です。

またCSSの変更を強いられます。

▼一枚画像とは…
●通常は緑のラインがはいっていない画像が表示されます。
●ロールオーバーすると下の画像に切り替わる仕組みです。


▼アメブロで追加したCSS

.globalNav{
position:absolute;
top:522px;
left:0px;
width:100%;
height:57px;
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120425/22/c1/e1/p/o00150057musix-design1335360899480.png) repeat-x;
}

.globalNav ul{
width:980px;
margin:0 auto;
}

.globalNav ul li{
float:left;
height:57px;
text-indent:-9999px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンA
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navA a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
display:block;
width:277px;
height:57px;
}

.globalNav li.navA a:hover{
background-position : 0px -60px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンB
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navB a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
background-position:-278px 0;
display:block;
width:147px;
height:57px;
}

.globalNav li.navB a:hover{
background-position : -278px -60px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンC
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navC a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
background-position:-425px 0;
display:block;
width:135px;
height:57px;
}

.globalNav li.navC a:hover{
background-position : -425px -60px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンD
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navD a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
background-position:-559px 0;
display:block;
width:182px;
height:57px;
}

.globalNav li.navD a:hover{
background-position : -559px -60px;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンE
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navE a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
background-position:-741px 0;
display:block;
width:97px;
height:57px;
}

.globalNav li.navE a:hover{
background-position : -741px -60px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
グローバルナビゲーションボタンF
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.globalNav li.navF a{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120426/00/b6/bc/p/o09800116musix-design1335367102702.png) no-repeat;
background-position:-838px 0;
display:block;
width:142px;
height:57px;
}

.globalNav li.navF a:hover{
background-position : -838px -60px;
}

ちょっとながいですね…


▼設置すると…
http://ameblo.jp/musix-design/



▼追加するのはCSSだけじゃない！フリースペースにも必要です！

【アメブロカスタマイズ】ヘッダー画像領域を横幅100%にする

ヘッダー画像を張りつけ、画像背景を黒にし、かつ横幅100％です。


■skinHeaderAreaとskinHeaderArea2を使い、ヘッダー画像は
skinHeaderArea2に張りつけます。

▼編集箇所
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-color:#000000;
width:100%;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

▼CSS追記
.skinHeaderArea2{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120425/00/d0/8a/j/o09800334musix-design1335280964881.jpg) no-repeat;
width:980px;
height:334px;
margin:0 auto;
}

ヘッダー画像としてはページ中央(margin:0 auto;)にします。