Kやまネット・ヘッダのカスタマイズ
- 2008年10月 5日(日) 23:36 JST
- 投稿者: ぬいいとさん
- 表示回数 18,840
http://sns.geeklog.jp/?m=pc&a=page_fh_diary&target_c_diary_id=1978
★ヘッダいっぱいいっぱいに画像を貼る方法
1.幅800×高さ任意で画像をつくる。
2./公開領域/layout/ProfessionalCSS/images/下に
customフォルダを作ってそこに作った画像をup。
3./公開領域/layout/ProfessionalCSS/css/layout.cssにある
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
この部分をcustom.cssにコピペ。
コピペしたものの
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;←画像の高さ分のピクセル
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
を変更。
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;←画像の高さ分のピクセル
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
この部分を
background: #1A3955 url(images/custom/画像のファイル名) no-repeat 0 0;
に変更する。#の部分は背景色だから適当に。
★アイコンの変更
/公開領域/layout/ProfessionalCSS/header.thtml
38行目あたり
<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/logo.gif" width="157" height="56" alt="{site_name}"{xhtml}></a></h1>
コレを
<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/hagukumi_logo.gif" width="587" height="64" alt="{site_name}"{xhtml}></a></h1>
に、変更。
★ヘッダいっぱいいっぱいに画像を貼る方法
1.幅800×高さ任意で画像をつくる。
2./公開領域/layout/ProfessionalCSS/images/下に
customフォルダを作ってそこに作った画像をup。
3./公開領域/layout/ProfessionalCSS/css/layout.cssにある
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
この部分をcustom.cssにコピペ。
コピペしたものの
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;←画像の高さ分のピクセル
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
を変更。
/*--------------------------------------
ヘッダコンテナ
--------------------------------------*/
div#container div#header {
height: 80px;←画像の高さ分のピクセル
margin: 0;
padding: 0;
background: #1A3955 url(../images/css/bg_header.gif) no-repeat 0 0;
}
この部分を
background: #1A3955 url(images/custom/画像のファイル名) no-repeat 0 0;
に変更する。#の部分は背景色だから適当に。
★アイコンの変更
/公開領域/layout/ProfessionalCSS/header.thtml
38行目あたり
<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/logo.gif" width="157" height="56" alt="{site_name}"{xhtml}></a></h1>
コレを
<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/hagukumi_logo.gif" width="587" height="64" alt="{site_name}"{xhtml}></a></h1>
に、変更。