趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
羊テンプレ3カラム TOP絵幅変更方法
 
 
【2006/03/02 11:06】
 
 
3カラムはTOP絵が変更できるようになってます。
メニューの幅にあわせて伸び縮みできるので 見た目が綺麗です
それだけなんですけどね(^▽^;)

長くなるので 追記欄でどぞ
以前から羊テンプレをお使いの方は 最新版をDLしてから設定してください
管理画面>ブログデザインの設定>修正(koju-hitsuji1のテンプレートの修正です)
そうすると出てきた画面に
『スタイルシートの編集 koju_hitsuji1を編集しています。』という文の下に
テキストエリアがありスタイルシートの編集が出来るようになってます。


TOP絵は大きく分けて立てに3つに分かれてて 
両端に85pxづつ飾りの部分があります。

例えば メニューと記事欄の幅を合わせて820pxだった場合、
820px-(85px×2)=650px
ということで 両端の飾り部分が85pxづつで中心部が650pxということになります。

まず タイトル欄の幅(width)を860pxから820pxに書き換えます。

次にt-left-ctrwidthを タイトル欄中心部 と 左の飾り部の幅 を足した幅に書き換えます。
650px+85px=735px

最後に中心部t-ctrの幅を650pxに書き換えます。


/* ブログのタイトルの設定 */
div#branding {
width : 860px;→820px /* コンテンツ幅に合わせて幅変更可能 */
height : 250px ;
}

div#t-left-ctr {
float : left; /* タイトル欄左と中心を左側に回り込ませる */
width : 775px;→735px /* 幅は t-ctr+85pxのサイズに指定 */
height : 250px ; /* 高さは250pxに設定してください */
}
div#t-ctr{
float : right; /* ”タイトル欄中心”を ”左”の右側に回り込ませる*/
width : 690px;→650px /* brandingの幅-170pxに設定*/
}

div#t-left {
float : left; /* タイトル欄左を中心の左側に回り込ませる */
width : 85px; /* 幅は85pxに設定してください */
height : 250px ; /* 高さは250pxに設定してください */
align : center ;
padding : 0px 0px 10px 0px;
background-image : url(http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/h-back3_left.gif);
background-repeat : no-repeat;
background-position : center top;
}

div#t-right{
float : right; /* タイトル欄右を左と中心の右側に回り込ませる */
width : 85px; /* 幅は85pxに設定してください */
height : 250px ; /* 高さは250pxに設定してください */
align : center ;
padding : 0px 0px 10px 0px;
background-image : url(http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/h-back3_right.gif);
background-repeat : no-repeat;
background-position : center top;
}

その他の幅(width)は数字を帰ると表示のレイアウトが崩れると思いますので 変えないでください。
スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
テンプレート >> ブログ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。