header01_08_20130213231803.png


スポンサーサイト
  1. --/--/--(--) --:--:--|
  2. スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

ブログの背景変更方法
  1. 2013/04/21(日) 14:00:07|
  2. ブログ制作
ブログ制作第2回!*゚∀゚*ちょーハイペース(笑)
やった事を忘れないために記録していく感じで更新します。

とりあえず簡単なところから始めてみようと思います・w・*


今回は、テンプレいじり。


まず最初にやった事は、背景変更。
素材は当ブログのリンクにもある フリー素材*ヒバナ* 様から頂きました。



背景にしたい画像の準備が出来たら、まずはブログにアップロードします。
次は、ブログの編集画面からテンプレート編集画面にいきます。

ここではhtmlとCSSの編集が出来ます。

htmlは構造
CSSは装飾


というような感じで覚えておくと、「ここを変えたいけど、どこを見ればいいの!?」
という問題が解決しやすくなります。きっと。



さて、続きは追記に記述します。
興味がある方は下にある 続きを読む からどうぞー。






今回触るのはCSSです。

まずはbodyを探します。こういう部分です。


body {
background-color: #fff;
background-image: url(「背景画像のURL」);/*①背景画像の指定*/
background-repeat: repeat;/*②背景画像の繰り返し*/
background-position:10px 20px;/*③背景画像の開始位置*/
background-attachment: fixed;/*④背景画像の固定*/



番号を追って説明していこうと思います。


①背景画像の指定。
背景にしたい画像をブログにアップロードして、そのURLを記述します。


②背景画像の繰り返し。
背景画像を繰り返すかどうかを訊かれています。

repeat; にすることで繰り返されます。
no-repeat; にすると繰り返されません。(1枚絵を使う時などはこちら)


③背景画像の開始位置。
左上の角から始まる背景画像の開始位置です。
先の数値(この場合10px)は上からの高さ、後の数値(20px)は左からの幅。

繰り返し画像なら数値はいくつでもいいです。(どこから始めても繰り返されるので)
1枚絵を使いたい方は0 0;にします。(0 0; にする事で、左上の角から始まります)


④背景画像の固定。
ブログをスクロールしても背景が動かないように固定することです。

写真などを背景にした場合で繰り返し指定がされていると、画面スクロールによって
延々同じ写真が続くことになりますが、この指定をしておくと1枚の写真を固定して
表示することが出来ます。

勿論、繰り返し画像でも固定されますので、背景が動いて鬱陶しい!なんて方は
この指定をしておくと便利です◎


さて、これで思った通りに背景を変更する事が出来るはず(?)
次は何を書こうかなー。ではでは!




web拍手 by FC2

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。