【改造編】 いざブログ改造してみる！

おはようございます(｡・∀・)
CSS勉強中スタッフです



今日は、いままで勉強したCSSの知識を使って、ブログを改造したよ('-^*)/

勉強中なので、学校デザインにしてみたよ



どう？？？






まずは、ブログ全体に敷く背景画像を用意する

私はこんな画像を用意したよ




この画像はピグに入って、撮ってきたよ



ピグのカメラだとこの大きいサイズの写真は撮れないので、こんな方法で画像にしたよ(^-^)/

パソコンがwindowsの場合
キーボードの「Print Screenボタン」 を押すとパソコンの画面をコピーできるので、
Print Screenボタンを押してコピーしたら、画像編集ソフトに「貼り付ける」（もしくは、画像編集ソフト上で ctrlボタンを押しながら vボタンを押してみる）とこういう大きめの画像ができるよ

あとはその画像を編集してね





ブログ全体の背景画像を指定するCSSを書く


次にはCSSを書いて、画像を背景にするよ(^O^)/


まずはこの記事を参考にして、CSSを>書いてみてね

⇒ブログ全体に背景画像を敷きたい



書けたかな？

そこに赤い色の部分を書き加えます！

.skinBody{
background:url(画像のパス) fixed no-repeat center top;
}

※解説
fixed ←背景画像をスクロールさせずに動かなくさせる
no-repeat ←背景画像を繰り返さない
center top ←背景画像の　横位置 と 縦位置



さらにさらに赤字の背景画像の下の色を指定するよ

.skinBody{
background:url(画像のパス) fixed no-repeat center top 色の指定;
}

⇒参考 : 【Tips】 CSSの色の名前

私の場合は、床の色の色番号（こんなの⇒ #e0caa3 ）にしたよ



最終的にこんな感じになるよ

.skinBody{
background:url(http://xxxxxxx) fixed no-repeat center top white;
}

CSSでヘッダーを広くする

つぎにはヘッダー（ブログのタイトルの部分）をもっと広くしたかったので、CSSで広くしたよ


(3-2) ブログヘッダーをさがす

/* (3-2) ブログヘッダー
--------------------------------------------*/

その下にある　.skinHeaderArea　を編集するよ

こんな感じ

.skinHeaderArea{
height:250px;
}

※解説
height ← 高さをpxなどで指定できる




CSSで記事やサイドエリアを半透明にして、ブログ全体の背景画像を透けて見えるようにする


これもこの２つの記事を参考にするとできるよ

⇒記事の背景を半透明にする

⇒メッセージボード、サイドバーの背景を半透明にする




できあがり！！

ちょっと難しいけど、ちょっとずつやってみてね



※推奨環境 でお試しください
※CSS編集がうまくいかないときは、この記事⇒「【Tips】CSS編集がうまくできないとき」を参考にしてください。
※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったものです。