ブログカスタマイズ１．背景画像

ソラマメのテンプレートってあまり選べないけど、なかにはいじってカッコよくしてる人もいる！
私もブログをオリジナル仕様にした～い！
ってことで、いろいろいじってみることにしました。

まずは背景画像・・・タイトル画像よりも先って順番違うかもｗ
でもちょっと背景画像を作ってみたかったんです。参考にしたのはヴィトンのモノグラム。
で、作ってみたのがコレです。


ヴィ、ヴィトンとはだいぶ違う・・・
（ｋとｔでモノグラム作るのが難しかったのでー）
んー。そのうち変えるかもしれません。

で、ここからが本題です。
ブログなんていじったことない、ｈｔｍｌよく知らない、ＣＳＳ？聞いたことあるような・・・
そんな私ですので、ちょっと調べてみました。


参考にしたサイト様
↓
SLMaMe Blog TEMPLETE

セカンドライフ:マコログ[MACOLOG]
（近々閉鎖するという記事が出ていたので、もしかしたらなくなっているかもしれません）
もうなくなっていました。残念

スタイルシート例文辞典


ふむふむ。
ちょっとだけ分かりました。
これを見て試行錯誤した結果、なんとか背景画像を変えることができました。


では、やっと背景画像の変え方です。あ、こっちが本題か。

まずは先ほど作った画像をアップロードします。そして、そのＵＲＬをコピーしておきます。
「ブログの設定」の中に、「テンプレート」があります。３種類保存できるようになっているので、失敗することも考えて今使っているものは置いといて、新しくテンプレートを追加してそれをいじるのがオススメです。

テンプレートのカスタマイズを開くと、

スタイルシート
トップページ
個別記事
アーカイブ

の４つに別れています。
今回変更するのは一番上のスタイルシートです。

スタイルシートの何行目かに、

body{
color :#000;
margin :0px;
background :#E0EDE0;
text-align:center;
}

という記述があります。元のテンプレートによって多少違うと思います。
この中のbackgroundが背景の指定です。この場合だと、#E0EDE0という色になっています。
この辺の説明は詳しくないのではしょりますね

で、ここを変えるわけです。

background
:#E0EDE0;

という部分を、

background-image
:url(さっきアップした画像のURL);

に書き換えてください。
一番下に登録ボタンがあるのでぽちっとな。
このテンプレートを使う、で、確認すると背景が変わっていると思います。


このブログの場合
before


after


いかがでしょう？
ちょっとだけオリジナリティが出せました。
次はタイトル画像にチャレンジしようと思います。そのうち。



＊カスタマイズ記事まとめ＊
ブログカスタマイズ１．背景画像（このページ）
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～
ブログカスタマイズ３．サイドバー