タイトル画像の変更

標準テンプレートをそのまま使うのではなく、タイトル画像を変えて見た場合のサンプルです。

（１）今回使ったテンプレートはこれ



（２）この画像のURL


http://www.blogblog.com/tictac_blue/top_div_blue.gif

（３）この画像をブラウザで表示



（４）画像をコピー

（５）JTrimに貼り付け


変更するサイズを「尺取り君」で測ると765X240

（６）タイトル画像に使う写真をPicasa2で切り抜いてコピー

 
注：画像の下半分は表示されないので、そのつもりで範囲選択する

（７）JTrimをもう一つ起動して貼り付け、トリミング、カラー調整、サイズ変更、シャープなどの加工を行う


加工が終わったらコピー

（８）もう一方のJTrimに合成貼り付け後、位置合わせを行う



（９）名前を付けて保存（jpg）



（１０）ＦＴＰでアップロード
（１１）その画像のアドレスを取得したらコピー
（１２）テンプレート編集で貼り付け



（１３）タイトル文字が邪魔な時の対処
タイトルが空だとエラーになるので全角の空白文字を入れる



但しマイレポートではブログ名が空白になってしまうので不便。他の方法はページ最下部。



ブラウザに表示されるタイトルは
<title>小樽歴史的建造物</title>を次にように追加して対処
 

（１４）ブラウザで表示

 

※タイトル文字がある場合
padding-$startSide: 160px-->45px;
font-size: 200%-->25px;
に変更


背景画像の縦方向をもっと表示させたいときは
padding-bottom: 35px;をもっと大きくするといい。
今回はpadding-bottom: 70px; とした。