CSS ヘッダー4 で画像加工の説明を簡単にしました
で・・・
出来上がった
この画像を使って説明します
画像を配置するまでは CSS 背景3
と同じです（ココでなくてもいいのですが・・）
heightは画像の高さではありません CSS ヘッダー3
を確認ください
/*ヘッダー*/
.skinBody{
background-image:url(画像のＵＲＬ );
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;/*中央に*/
}
.skinHeaderFrame{
height:250px;
}
.skinBlogHeadingGroupArea{
padding:0;/*ブログタイトル概要位置リセット*/
}
↑ブログタイトルと概要を消してクリックできるエリアを作ります
もし・・横980px縦240pxのヘッド部分全部でクリックできるようにするには
（height:250px;で250pxあけましたがギリギリまでより少し狭くして240pxに・・）
.skinTitleArea a{
width:980px;/*リンクの横*/
height:240px;/*リンクの縦*/
display:block;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
outline:none;
}
.skinHeaderArea h2{
display:none;/*概要を非表示*/
}
もし・・このブログと同じように・・
画像にあわせて一部分だけクリックできるエリアを設定するには・・
HTMLが使えれば封筒の枠にあわせてリンクできる範囲を作ることも出来るのですが・・
CSSだけしかさわれないのではしかたがない・・
出来るだけ画像に合わせてクリックできる範囲を設定します
/*ヘッダー*/
.skinBody{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center top;/*中央に*/
}
.skinHeaderFrame{
height:250px;
}
.skinBlogHeadingGroupArea{
padding:0;/*ブログタイトル概要位置リセット*/
}
.skinTitleArea a{
width:400px;/*リンクエリアの横Ａ*/
height:150px;/*リンクエリアの縦Ｂ*/
display:block;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
outline:none;
}
.skinHeaderArea h2{
display:none;/*概要を非表示*/
}
.skinTitleArea{/*クリックできる範囲*/
margin-top:70px;/*上からの位置Ｃ*/
margin-left:40px;/*左からの位置Ｄ*/
}
