ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。
今回はタイトルバナーを変更してみます。
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は中央揃えになります。これで画像の邪魔にならない見えやすい位置にテキストを配置します。
いっぺんにいろいろやると大変なので今日はここまで。
2008年01月30日
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/11527512
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
http://blog.sakura.ne.jp/tb/11527512
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック