タイトル画像の変更法
今日は、ほかの方のブログを参考にブログのタイトル部分の画像を変更しました
まずスタイルシートの記述部で下記赤文字に該当する部分を見つけます
【私のベーステンプレートでは】
#container{font-size:12px;
background:#FFFFFF;
width:960px;
margin:0px auto;
border-top-width: 1px;
・・・・・・・・・・・・・・・・・・・・【省略】
#banner,#subbanner{
background:#fff url(/_img/fireworks/fireworks._top.jpg) no-repeat left top;
padding:0px 0px 0px 0px;
height: 220px;
}
これは、タイトルの画像が横幅960px 縦幅 220px であることを意味していて
画像は/_img/fireworks/fireworks._top.jpg にある画像を使用していることをあらわしている
ここまでわかったら、後は簡単、
フォトショップなどで960px × 220px の画像を作成(縦幅は自由に変更可能)します
私の場合は540pxが画面の大きさ的にちょうどでした。
この画像を、画像としてアップします(記事を追加する際と同じ要領)
記事に差し込むとURLが記事に出るので、それをクリップボードにコピーして、
テンプレートカスタマイズページに移り/_img/fireworks/fireworks._top.jpg と差し替えます(http//:dxidxi.naturum・・・・)
また、今回は縦幅を変えたので 220px を 540pxに変更
これで見事に、画像の変更が完成です
今後、もっと勉強しながら少しずつ細かい部分を変えていく予定です
まずスタイルシートの記述部で下記赤文字に該当する部分を見つけます
【私のベーステンプレートでは】
#container{font-size:12px;
background:#FFFFFF;
width:960px;
margin:0px auto;
border-top-width: 1px;
・・・・・・・・・・・・・・・・・・・・【省略】
#banner,#subbanner{
background:#fff url(/_img/fireworks/fireworks._top.jpg) no-repeat left top;
padding:0px 0px 0px 0px;
height: 220px;
}
これは、タイトルの画像が横幅960px 縦幅 220px であることを意味していて
画像は/_img/fireworks/fireworks._top.jpg にある画像を使用していることをあらわしている
ここまでわかったら、後は簡単、
フォトショップなどで960px × 220px の画像を作成(縦幅は自由に変更可能)します
私の場合は540pxが画面の大きさ的にちょうどでした。
この画像を、画像としてアップします(記事を追加する際と同じ要領)
記事に差し込むとURLが記事に出るので、それをクリップボードにコピーして、
テンプレートカスタマイズページに移り/_img/fireworks/fireworks._top.jpg と差し替えます(http//:dxidxi.naturum・・・・)
また、今回は縦幅を変えたので 220px を 540pxに変更
これで見事に、画像の変更が完成です
今後、もっと勉強しながら少しずつ細かい部分を変えていく予定です