2008年01月30日

タイトルデザインを変える (3)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

今回はタイトルバナーを変更してみます。

1)タイトル画像を用意してください。ブログの表示部分の幅と同じ幅にします。これをアップロードしてURLをメモしておいてください。

※ブログの表示部分の幅はスタイルシートの#containerにwidthとして指定してあります。

2)ブログの管理ページからスタイルシートを編集するページを開いてください。

そこにタイトル画像を指定しているところがあります。
#bannaerという名前が付いていることが多いです。
background-imageという部分がタイトル画像になっていますのでここのurl指定のところを保存したタイトル画像のURLに書き換えます。

#banner{
font-family: verdana,"MS Pゴシック",Osaka,Sans-serif;
background-image:url(http://***.***.co.jp/myfile/image/top.jpg);
background-position:0px 0px;
background-repeat:no-repeat;
margin:0px;
height:100px;
padding:20px 50px 0px 20px;
text-align:left;
}

heightを用意した画像の縦のサイズに合わせて変更します。


paddingとtext-alignはタイトル画像の上に載せる文字の位置指定です。
paddingは文字の最初の位置です。上、右、下、左の順にピクセルで指定しています。
text-alignは行揃えです。leftは左揃え、rightは右揃え、centerは中央揃えになります。これで画像の邪魔にならない見えやすい位置にテキストを配置します。

いっぺんにいろいろやると大変なので今日はここまで。

posted by 青猫 at 12:05| Comment(0) | TrackBack(0) | ブログデザイン講座
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/11527512
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック