3/13/2009

Why don't you change your blog design?

mixiの日記には書いたんだけど、こっちにも書いておきますね。

ブロガー(blogspot)をお使いの皆さん、こちらのブログは比較的簡単に背景画像が変えられるのはご存知ですか?

最近、しかも最近Autumn LeavesTwo Peasでデザイナーをしている、Rhonna FarrerとHeidi SwappとJanet Hopkinsの3人が立ち上げたサイト、
「House of 3」


House of 3




では毎月無料の壁紙ももらえるみたい・・・
(でも今はダウンロードできないような・・・毎月期間限定なのかな?)

まぁ、無料じゃなくても気に入ったのがあれば1.5ドル(今のレートで約150円程度なので購入してもそんなに高くないですよ。
Blog Coutureという所から壁紙とタイトル用画像が買えるので行ってみてね~!!!

それでダウンロードしたものや、自作した壁紙を自分のブログで使うには、画像をネット上にアップしてから、テンプレートをいじる必要があります。

アップする場所は、ブロガーならPhotobucketがいいみたいです。
(他のところにアップしてやってみたけど、うまくいかなかったので・・・)
photobucketでアカウントを作って壁紙画像をアップするのですが、
アップする時にポイントが・・・




この画面で赤線で囲んだ部分を必ず「1megabyte file size」にしてください!
これをやらないと壁紙が小さくなっちゃいます。
そして画像をアップしたら、該当の画像をクリックして拡大。





大きく表示されたら、マウスの右クリックで画像だけを表示させて、画像のみが表示されたら、そのURLをコピーします。

そうしたら、ブログの管理画面に戻ります。
ブロガーにログインして、
ダッシュボード > レイアウト > HTMLの編集から

テンプレートの編集のところをコントロール+Fまたはコマンド+Fで検索して、

「body {
background」
の部分を検索して、

その部分を

body {
background: url(http://○○○.com/○○○○○○○○.jpg)
}

という感じで先ほどPhotobucketのサイトでコピーした壁紙画像のURLを入れるとOKです。

もし壁紙を水平、垂直にリピートさせたいなら、

body {
background: url(http://○○○.com/○○○○○○○○.jpg) repeat top center;
}

もし壁紙を固定させたいなら、

body {
background: url(http://○○○.com/○○○○○○○○.jpg) fixed top center;
}

のように変えます。

でもこのHouse of 3の壁紙画像はブロガーのデフォルトのテンプレートのサイズにしか対応してないんです・・・。

ワタシのブログは文章とブログパーツが並ぶ部分をカスタマイズして幅を広くしてあるので、画像の真ん中の白い部分を若干広げました。
読みにくいし、タイトル画像とはあってなくてごめんなさーい(汗)!!

今のワタシのこの壁紙もRhonnaがデザインしたHouse of 3の2月の無料壁紙でした。
いかにもバレンタインっていう感じですよねー。

タイトルの所の鹿と合ってないし、ワタシの雰囲気と違うので、そのうち変更したいと思います。

3 comments:

MakiJo said...

Tipoさん、有難う~~!!
このチュートリアルを使って、私もブログの模様替えしてみます。この壁紙も素敵ですね。値段もお得だと思います。

benca said...

やっとブログ見にこれました。(しかし既に子供が起きてきてやる時間が・・・)

QRコードには変換が出来たので、次回背景を頑張ってみようと思います!!
のんびりだけど、頑張ります。

tipo said...

>まきさん

まきさんも壁紙変えましたね!
ワタシもこれだとちょっと幅があってないし、全体的なイメージの統一感がないので早急に変えたいんですが、いつになることやら・・・


>べんかちんさん

お子さん小さいとなかなか大変ですよね!
是非ゆっくりブログのデザイン、変えてみてください!!!