• ベストアンサー

FC2のスタイルシートで背景を変えたい!!!!

宜しくお願い致します!!! いろいろなサイトでたくさん時間を費やして調べたのですが、 その通りにやってるつもりなのですが、自分の好きな背景に変更できません。+゜(。>д<。)゜+。 背景は body ですよね?? ↓私のCSSの最初の部分↓ /************************************/ /* body */ body{ background-color: #FFFFFF; margin: 0; padding: 0; text-align: center; } #baseBlock { width: 760px; padding: 0px; margin: 0px auto; text-align: left; } ↑ ちなみに、私が入れたい背景は、img6f29afc806ki0s.gif  デス。 今は、背景が白(非常にシンプル)です。 どうか、わかる方、宜しくお願い致します!!!!

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

>background-image:url(img6f29afc806ki0s.gif); >を入れたのですが・・ダメでした。 FC2ブログについてよく知らないのですが、 ある方のブログをみたら http://サイトアドレス/ユーザー名/file/20060412133308.jpg のようになっていました。 アップロードしたファイルを投稿に使うときに、画像のアドレスが上記のような感じででてくるんじゃないかと思うので background-image:url(http://サイトアドレス/ユーザー名/file/img6f29afc806ki0s.gif); (あくまで例です) みたいに、省略しないで全部の部分を書いてみて下さい。 (自ブログと同じアドレス部分は相対アドレスとして省略できますが、とりあえずは、全部でやってみて)

mikan2646
質問者

お礼

できました!! 何度もありがとうございました!!! ブラウザの更新ボタンをクリックしたら変わりました(///ω///) 親身になって頂き、本当に感謝致します。 本当にありがとうございました!!!!

mikan2646
質問者

補足

親身になって頂き、本当にありがとうございます!!!! 確かに、しっかりアドレス(http://~)を入れてませんでした。 ご指摘、ありがとうございます!!! ただ、しっかりアドレスを入れても、プレビューを見ても改善しませんでした(ノдヽ*) ↓これは、私のスタイルシートの最初の部分です。 /************************************/ /* body */ body{background-image: url("http://blog27.fc2.com/k/kaerinirorin/file/20060620232809.gif") } #baseBlock { width: 760px; padding: 0px; margin: 0px auto; text-align: left; } ↑ 何が間違っているのでしょうか?? 重ね重ねすみませんっ。   宜しくお願い致します<m(__)m>

その他の回答 (5)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.6

#4>↑ 何が間違っているのでしょうか?? 重ね重ねすみませんっ。 特別問題はないような感じです。 普通、ブログのスタイルシートを変更すると、 ブログの再構築が必要になりますが、 それは実行しておられますか

mikan2646
質問者

補足

本当ですか??  では何がいけないんでしょうかね*泣* >ブログの再構築が必要になりますが、 >それは実行しておられますか 再構築って、最後に確定する事ですよね?? (FC2で言うと“更新”ボタンをクリック) 実行してます。。。

  • yuukan
  • ベストアンサー率34% (192/560)
回答No.5

/************************************/ /* body */ body{ background-image: url(http://blog27.fc2.com/k/kaerinirorin/file/20060620232809.gif); background-position: left top; background-repeat: repeat; background-color: #FFFFFF; margin: 0; padding: 0; text-align: center; } #baseBlock { width: 760px; padding: 0px; margin: 0px auto; text-align: left; } で だめでしょうか? http://blog.fc2.com/forum/  fc2ブログの ユーザーの方たちの テンプレート掲示板に質問された方が 早いかも・・・ですね

mikan2646
質問者

お礼

ありがとうございました!!! 出来ました!!! ブラウザの更新ボタンを押したら変わりました。 何度もご回答頂き、本当に助かりました!! 本当に本当にありがとうございました゜+.゜ヽ(女喜′∀`)ノ゜+.゜

mikan2646
質問者

補足

ご回答、ありがとうございます!!! そのままコピペさせて頂いたのに、何も変わりせん・・・ スタイルシートを一部変えたのに、今までと全く同じ(背景が白)って ありえますでしょうか?? >fc2ブログの ユーザーの方たちの >テンプレート掲示板に質問された方が 早いかも・・・ですね そうですね。 同じような質問を履歴で参考にしてもわからなかったので、 質問してみますネ・・ すみませんでした(*- -)(*_ _)

  • yuukan
  • ベストアンサー率34% (192/560)
回答No.3

訂正です(汗)  ちゃんと ファイル名を入れているのでしょうか? ↓ ↓ img6f29afc806ki0s.gif ではなく  ちゃんと URLを 入れているのでしょうか?

mikan2646
質問者

お礼

ありがとうございます!! 確かに、しっかり http://~ と入れておりませんでした(*- -)(*_ _) それでもまだ改善されないので、他のどこかが間違ってると思うのです。。。 NO4の補足質問の欄に書かせていただきましたので、宜しければお力を下さい!!!   宜しくお願い致します<m(__)m>

  • yuukan
  • ベストアンサー率34% (192/560)
回答No.2

横れすで失礼します No.1の方が ご紹介しているURLのサイトでは background-image: url("../01.gif")と 指示されてます ”” を書き加えていますか? それから FC2ブログの場合 アップロードした画像のアドレスは http://blog●●.fc2.com/●/●●/file/●●.jpgと なっているはずです 画像ファイル名を入れただけでは 出ないと思いますが img6f29afc806ki0s.gif ではなく  ちゃんと ファイル名を入れているのでしょうか?

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

background-image:url(img6f29afc806ki0s.gif); でどうでしょう

参考URL:
http://www.htmq.com/style/background-image.shtml
mikan2646
質問者

お礼

早速のご回答、ありがとうございます!!! どこに入れたら良いのでしょうか??? background-color: #FFFFFF; の部分を消して background-image:url(img6f29afc806ki0s.gif); を入れたのですが・・ダメでした。 あと、 background-color: #FFFFFF; の上にも入れてみたのですが、ダメでした。。 初心者でごめんなさい。。 入れる場所をお教え下さい。 宜しくお願い致します。

関連するQ&A

  • fc2ブログのスタイルシートについて

    h1~h6タグの文字の大きさ&改行(しない)を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 (文字数が足りないので数ヵ所省きました)↓ body{ font-family: "Verdana","MS Pゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","MS Pゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","MS Pゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","MS Pゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部(左側) ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー(記事) ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","MS Pゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","MS Pゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","MS Pゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","MS Pゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }

    • ベストアンサー
    • HTML
  • 背景の色がコンテンツ部分にも表示されてしまいます

    サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> &gt; あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }

  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像1を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40px×40pxの背景画像2を「repeat」指定しています。 この背景画像2が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの2種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか?? よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------

  • スタイルシートの横並びリスト中央配置について

    #Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • Firefox2.0で背景が上段に集まってしまいます。

    以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "MS Pゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer {     clear: both width: 900px;     background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・(ロールオーバーリンク) </div> <div id="header"> ・・・・・(MPEG画像) </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>

    • 締切済み
    • CSS
  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto;    margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto;    margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • 背景色をうまく使えない

    CSSを使ったページを試作しているのですが、背景色をうまく使えません。 「outline」の周り全部を赤の背景色にしたいのですが下記ページのようにしかなりません。どうしたら良いのでしょうか。 http://www.asahi-net.or.jp/~gc4t-iwt/taipei0801/1_19.html CSSソース @charset "Shift_JIS"; body { margin-left : 60px; color: black; background-image: url("b_bcg030.gif"); background-repeat: repeat-y; background-color: red; } #outline { background-color: lavender; width: 750px; text-align: left; border: 2px solid silver; padding: 5 5 5 5px; } h2 { padding-left: 100px; }

  • ページの一番上にできた余分な余白の消し方

    ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか?この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>

    • ベストアンサー
    • HTML
  • XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

    フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

  • 背景画像がきれます

    以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で(小さい画像)では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか?上記htmlが間違っているのでしょうか?それともう少し大きくして画像が切れない方法はないのでしょうか?よろしくお願いします。