鏡の研究室.6(CSS/ブログ横幅を900ピクセルに広げる) | 鏡の歌(きょうのうた)

鏡の歌(きょうのうた)

(´・ω・)たまごが好き

【鏡-きょうのうた-歌】


CSS/ブログ横幅を900ピクセルに広げる
(サイズ設定)


3コラムの場合のCSS
--------------------------------------------------
ameblo CSS Skin Layout Settings
3コラム記事中:横幅固定

FileName: /p_skin/cmn/css/type_c.css
Date: $Date: 2007/03/23 01:25:35 $
Version: $Revision: 1.1 $
--------------------------------------------------
*/
#frame:after,
#wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#frame,
#wrap{display:inline-table;}
/* Hides from IE-mac \*/
* html #frame,
* html #wrap{height:1%;}
#frame,
#wrap{display:block;}
/* End hide from IE-mac */
#frame{
width:900px;/*ブログ全体の横幅*/
margin-left:auto;
margin-right:auto;
}
#wrap{
width:100%;
}
#main{
width:540px;/*メインカラムの横幅*/
float:left;
padding-left:10px;/*メインカラム左の余白横幅*/
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;/*サブカラムA横幅*/
float:left;
z-index:1;
}
#sub_b{
width:170px;/*サブカラムB横幅*/
float:right;
z-index:2;
}
/* -- // ameblo CSS Skin Layout Settings END --*/


CSS/ブログ横幅を900ピクセルに広げる
(ヘッド)


/*900ピクセルのヘッダ画像*/
#header{
width:900px;/*画像の横*/
height:350px;/*画像の縦*/
background-image: url(画像URL);
background-repeat:repeat-x;/*繰り返さない*/
}

/*タイトルを消して画像リンク タイトル文字表示の場合以下不要*/
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:900px;/*画像の横*/
height:350px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}



Caetla