2004年11月07日

背景の色とタイトルの色・サイズ変更

今回は背景色とタイトル文字をいじろうと思います。
書き換える場所さえわかれば10分くらいでできます(多分)。私の場合それを見つけるのにももたもたしちゃいますが (^-^;

CSSをいじるにあたって、変化がわかりやすいかなと思うのでテンプレートはホワイトを使うことにします。

準備としてブログのテンプレート管理からCSSカスタマイズを開きます。
同時に
Style Sheets(シーサーブログのスタイルシートについてのページ)
カラーコードパレット WEB配色用(色選択ツールのページ)
を開いておくといいかもしれません。


1.背景色の変更
 背景に関する設定は「body」の部分で行うので、「body {}」の中にある「background:#FFF」の「#FFF」部分(これが色を表しています)を好きな色に変更。好きな、と言ってもでたらめに文字を入れるのではダメなので、上で紹介したような色選択ツールや本を使います。
 書き換えが出来たらプレビューをクリック。上手くいっていれば背景の色が変わっているはずです。

2.タイトル文字のサイズ・色変更
 タイトルに関する設定は「h1」の部分で行います。「h1 {}」の中をいじりましょう。今回は文字のサイズと色を変更しました。
 サイズは「font-size:30px」の「30px」を好きな数字に変えます(pxは消さないように)。私は30→25と少し小さくしてみました。
色は「h1 a{}」の中にある「color:#000」の「#000」を背景色と同じ要領で変更。
 ここまで出来たらまたプレビューをクリック。上手くいっていればタイトルに変化が。

3.サブタイトル文字の色・サイズ変更
 変更箇所はちょっと下にスクロールしたところにある「.description {}」の中(「#banner {}」の下)です。
 2.と同じ要領で色とフォントを変更。
 ここまで出来たら(以下略)

4.今回の変更前・変更後(画像クリックで拡大)
原型

 これが
  ↓
  ↓
  ↓
変更その1・背景とバナー部分を変えました

 こうなりました。




今回はここまで。本当は「#banner {}」の中をいじってバナー部分だけ色を変えたり画像を入れたりしたかったんですがどうにも上手くいかなかったのでまた今度挑戦しようと思います。
 それではここまでおつきあいありがとうございましたm(_ _)m

ラベル:CSS
posted by 四葉屋 at 01:48| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


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

この広告は1年以上新しい記事の投稿がないブログに表示されております。