Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

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

2007年01月03日

背景画像を使用するブログカスタマイズ方法

今回は背景画像を使用するカスタマイズの解説です。多少クセがあるので、説明を参考にしてカスタマイズしてみてください。(背景画像はリピートさせる、標準指定を想定しています)

1.ボックス外部の背景画像


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
左右に背景画像が表示されます。大きいモニタだと、意外に横にスペースがありますので、意味はあります。

2.背景画像をボックス内にも適用

背景画像を、コンテンツが無い部分に対して全体的に使用します。コンテンツがある部分は背景色を適用させます。


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.mainnavi{
margin-top: 10px;
text-align: center;
font-size: 12px;
background: #fff;
}

.comment-entry{
font-size: 12px;
color: #000;
width: 100%;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
変更箇所は離れていますので、検索などを使用して該当部分を見つけて下さい。エントリ部分やフリーエリア、左右カラムメニューなどの背景色は指定していますので、それ以外の部分には背景画像が適用されます。

以上が基本的な背景色を使用する際のカスタマイズ方法です。ちょっと簡単とまではいかないので、これ以外のカスタマイズをする場合は少々面倒かもしれません。

スポンサーサイト

コメント

無事に壁紙を付けることが出来ました
記事までわかりやすく書いてくれて本当にありがとうございました
またお世話になるときがあるかもしれませんがよろしくお願いします

ブログにここのテンプレートを使わせていただいてるbrownといいます。
あの、記事を投稿するときに、強調文を入れたり文字を小さくしたりできないんですが…
あと、最大サイズの文字を連続して入れると、行と行が重なって見にくくなってしまいます。
これらの問題を修正するHTMLはないのでしょうか?
勝手な質問ですいませんが、お願いします。

簡単な修正法

brownさんこんにちは。ご利用ありがとうございます。

>強調文を入れたり文字を小さくしたりできないんですが
全称セレクタ部分を削除すれば使用できます。

* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal;
word-break: break-all;
font-family: Verdana, Arial, sans-serif;
}
の、
font-style : normal;
font-weight: normal;
を削除してください。

>最大サイズの文字を連続して入れると、行と行が重なって見にくくなってしまいます

FC2の記事投稿フォームだと、文字サイズの指定が7段階
指定になっています。このテンプレはpx指定です。
エントリ部分だけ修正すれば、とりあえずは直るはず。

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 12px;
line-height: 150%;
}

font-size: 12px;

font-size: small;

font-size: x-small;
に変更してください。

これで最大サイズでも被らないと思います。

ありがとうございます。
うまく変更する事ができました。

テンプレを使わさせて頂いております。

背景画像のカスタマイズの方法等、詳しく説明して頂いており、無事問題が解決することが出来ました。

あつかましいかと思いましたが感謝のコメントを伝えたいと思いましたので・・・

どうもありがとうございます☆

ありがとうございます

かぶきっちょさん、こんにちは。

書き込みありがとうございます。気に入っていただけた
ようで何よりです。

ブログの更新、頑張って下さいね。

かなり初歩的な質問なんですけど、
変な記号みたいなのはどこに貼り付ければいいのでしょうか? 

ベルさん、こんにちは。

>どこに貼り付ければいいのでしょうか? 

ブログ管理画面の左メニュー(緑)に環境設定がありますので、
それを拡げて、テンプレートの設定、をクリックします。

編集したいテンプレート名欄右にある、編集をクリックすると
編集画面に移動します。

この場合はスタイルシートなので、こちらに記載してある
該当箇所を検索などで調べ、書き換えます。

その後プレビューボタンを押して、カスタマイズがうまくいつて
いるかを確かめます。

問題なければ更新を押します。これで完了です。


手順は以上ですが、間違えると表示されなくなる可能性も
ありますので、こちらのサイトなどでテンプレートの編集の
仕方をチェックしてみてください。
その後カスタマイズに挑戦されることをおすすめします。

http://fc2blogwalker.squares.net/modules/pukiwiki/#ct537_1_14
FC2ブログの歩き方トップ
http://fc2blogwalker.squares.net/

はじめまして。

テンプレートを使わせていただいてます。
わかりやすい説明ありがとうございました。
これからもよろしくお願いします。

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/15-153d6155
プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


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