JUGEM(ジュゲム) ブログのヘッダー画像交換
今回はブログ新規作成時のデフォルトのテンプレートをオリジナル画像へと変更してみます。
管理画面トップからデザインのHTML・CSS編集に入ります。編集画面へ入ったら、CSS編集フォームのヘッダー情報を書き換えていきます。
このテンプレートの中のヘッダー情報は33行目付近にあります。
#wrapper {
width: 740px;
margin: 0 auto;
background: #FFF url(./template/piano/img/wrapper_bg.gif) repeat-y;
} #header {
height:160px;
background: #FFF url(./template/piano/img/header.gif) no-repeat;
color:#FFF;
}
（デフォルトのスタイルシートを、エディタにコピーしたサンプルです。）
margin: 0 auto;
background: #FFF url(./template/piano/img/wrapper_bg.gif) repeat-y;
} #header {
height:160px;
background: #FFF url(./template/piano/img/header.gif) no-repeat;
color:#FFF;
}
このスタイルシートの情報では、画像サイズは幅が740×高さが160です。このサイズのヘッダー画像を用意し「データ管理」→「画像の管理」画面で用意した画像を、アップロードします。
アップロード画面の下部に画像のアドレスが出ているはずです。画像のアドレスをコピーしてスタイルシートのヘッダー画像のアドレスを書き換えればヘッダー画像変更は完了です。
色を変更している部分がヘッダー画像のアドレスです。
＜img src="http://mitame-design.img.jugem.jp/20100227_875154.jpg"＞
