ソラマメブログ

2008年01月08日

ブログカスタマイズ1.背景画像

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

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

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

で、ここからが本題です。
ブログなんていじったことない、htmlよく知らない、CSS?聞いたことあるような・・・
そんな私ですので、ちょっと調べてみました。


参考にしたサイト様

SLMaMe Blog TEMPLETE

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

もうなくなっていました。残念face07

スタイルシート例文辞典


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


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

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

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

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

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

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

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

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

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

background
:#E0EDE0;

という部分を、

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

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


このブログの場合
before
ブログカスタマイズ1.背景画像

after
ブログカスタマイズ1.背景画像

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



*カスタマイズ記事まとめ*
ブログカスタマイズ1.背景画像(このページ)
ブログカスタマイズ2.タイトル画像(準備)
ブログカスタマイズ2.タイトル画像~前編~
ブログカスタマイズ2.タイトル画像~後編~
ブログカスタマイズ3.サイドバー



同じカテゴリー(ブログカスタマイズ修行)の記事画像
ブログカスタマイズ3.サイドバー
ブログカスタマイズ2.タイトル画像~後編~
ブログカスタマイズ2.タイトル画像~前編~
ブログカスタマイズ2.タイトル画像(準備)
同じカテゴリー(ブログカスタマイズ修行)の記事
 ブログカスタマイズ3.サイドバー (2008-02-25 23:26)
 ブログカスタマイズ2.タイトル画像~後編~ (2008-01-30 23:47)
 ブログカスタマイズ2.タイトル画像~前編~ (2008-01-29 23:35)
 ブログカスタマイズ2.タイトル画像(準備) (2008-01-10 13:03)

この記事へのコメント
はじめまして。わたしも背景を変えたいなと思ってました。
とても参考になりました^^
Posted by risarisa at 2008年01月11日 19:01
わお
ROCA STUDIOのrisaさんですね
いつもかわいいなぁと思いながらブログ拝見してます(←おやじみたい)
参考にしてくださったらとても嬉しいです*^^*
これからもカスタマイズの様子を書いていくと思うので、よろしければまた覗きに来てやってくださいね
Posted by ChiyoChiyo at 2008年01月11日 22:48
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。