ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。
今回はタイトルバナーを変更してみます。
１）タイトル画像を用意してください。ブログの表示部分の幅と同じ幅にします。これをアップロードしてURLをメモしておいてください。
※ブログの表示部分の幅はスタイルシートの#containerにwidthとして指定してあります。
２）ブログの管理ページからスタイルシートを編集するページを開いてください。
そこにタイトル画像を指定しているところがあります。
#bannaerという名前が付いていることが多いです。
background-imageという部分がタイトル画像になっていますのでここのurl指定のところを保存したタイトル画像のURLに書き換えます。
#banner{
font-family: verdana,"ＭＳ Ｐゴシック",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は中央揃えになります。これで画像の邪魔にならない見えやすい位置にテキストを配置します。
いっぺんにいろいろやると大変なので今日はここまで。
慎重に水平になるようにぎゅぎゅっと締めこんだら、マシンごと回転？
迂闊なことにエスプレッソマシンが届いたのにコーヒー豆を買い忘れていました。
定価59000円ですが、通販ではほぼ半額以下で売ってるのも調べあげました。
