2024年12月22日(日) 12:22 JST

Kやまネット・ヘッダのカスタマイズ

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>
に、変更。