今度はヘッダー部分がブログよりはみ出ているケースです
旧スキンのときは大変でしたが新しいデザインでは簡単に出来ちゃいます
まずはこんな画像を用意します・・・
↑1200px × 794px
この画像はブログの幅より大きいので背景3の記事
を参考に
/*ヘッダー*/
.skinBody{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;/*中央上に*/
}
タイトル部分を広げます・・・
.skinHeaderFrame{
height:250px;
}
次はヘッダー2の記事
を参考にタイトルと概要を画像に合うように移動させます・・
.skinBlogHeadingGroupArea{
padding:0;/*ブログタイトル概要位置リセット*/
}
.skinTitleArea{/*ブログタイトル*/
margin-top:100px;/*上からの位置Ｄ*/
margin-left:80px;/*左からの位置Ｅ*/
}
.skinTitle, .skinTitle:visited, .skinTitle:hover, .skinTitle:focus{/*ブログタイトル*/
color:#333333;/*文字色*/
font-size:2.2em;/*文字サイズ*/
}
.skinDescriptionArea{/*ブログ概要*/
margin-top:20px;/*ブログタイトルからの位置Ｆ*/
margin-left:100px;/*左からの位置Ｇ*/
}
.skinDescription{/*ブログ概要*/
color:#333333;/*文字色*/
font-size:1.0em;
}
あとは・・・背景を工夫すれば完成です・・
