• ベストアンサー
  • すぐに回答を!

ブログのTOP画像表示方法(悩んでます)

どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか?? ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数54
  • ありがとう数1

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

  • ベストアンサー
  • 回答No.1

画面全体に画像を載せたいのでしょうか?(例として画面右下に花の写真を…等) タイトルロゴを画面一番上に表示させたいのでしょうか? 現在表示している画像はそのままでさらに画像を表示させたいのでしょうか? そう言ったことでも異なりますのでよろしければ補足ください。 また、できればドコのブログかの記載もいただけるとより正確な解答が望めるかと思います。 ちなみに、livedoor であれば body{ background-attachment:fixed; background-image:url(***); background-repeat:no-repeat; background-position:0% 100%; } で、左下に***にて記載したURL画像を表示させる形となります。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

1412loversさんのやり方でやったらできました!! ありがとうございました。

質問者からの補足

ブログは269gで タイトルロゴとして画面一番上に表示させたいです!!

関連するQ&A

  • CSS ブログ本文とサイドバーのバランス

    質問させてください! weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、 両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを 調整しようと調べながら各数値を変更してみたのですがうまくいきません。 どの数値を変更するべきなのか教えていただけたらと思います。 理想のサイトのリンク先も貼付けておきます。 http://www.fecalface.com/ body { background-color:#fff; font-family:"helvetica",arial,sans-serif; font-size:62.5%; color:#777; margin:0; padding:0; } acronym { cursor:help; border-bottom:1px dotted #ddd; } #container { font-size:1.2em; width:800px; margin:0 auto; } #header { color:#444; margin:0; padding:0px; background:#fff url(%%HEADERIMG%%) no-repeat bottom right; } #header h1 { font-family:"helvetica",arial,sans-serif; font-size:2em; color:#333; margin:30px 0 0 0; font-weight:normal; line-height:1.5; } #header h1 strong { color:#c00; } #header h2 { margin:1000px 0 0 0; font-size:1em; font-weight:normal; color:#999; } #navigation { text-align:right; margin:10px 10px 10px auto; } #navigation { margin:0 10px 0 0; padding:0; } #navigation li { margin:0; padding:0; list-style:none; display:inline; } #navigation li a { padding:5px 6px 2px 4px; margin:0 2px 0 0px; color:#000000; text-decoration:none; font-weight:helvetica; border-bottom:1px solid #ddd; } #navigation li a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:link { color:#C00; border-bottom:1px solid #c00; } #active a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:visited { color:#C00; border-bottom:1px solid #c00; } #content { margin:20px 0 20px 10px; padding:0; } #content p { padding:2px; text-align:justify; line-height:1.5; } #content h1 { display:block; margin:50px 0 0 10px; padding:0; font-family:"helvetica",arial,sans-serif; font-size:1.8em; color:#c00; border-color:#ddd; border-style:solid; border-width:0 0 1px 0; } #content h2 { display:block; margin:40px 40px 0 0px; padding:0 長くなってしまいましたがよろしくお願いします!

    • ベストアンサー
    • HTML
  • スタイルシート ページ左右の余白幅 設定

    Seesaaブログを利用しています。 テンプレート「ガーベラ」のページ左右の余白幅を狭くしたいと思っています。 やりたい事は、例えばWord文書の左右余白は規定値で35mmになっているが20mmに変更したい という感じです。 初心者なので少し調べましたが スタイルシートのpadding、marginの設定を変更する必要がありそうな事しか分かりませんでした。 以下、スタイルシートの一部をコピーしたものです。 具体的に、どの部分を変更すればいいのか教えて下さい。 body { font-family: Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-align:center; background-color:#FFF; color:#666666; } #container{ text-align:center; margin: 10px auto 0px auto; padding:0px; width:769px; } a{ text-decoration: underline; color:#87B400; } #banner{ font-family:arial, Helvetica; height:275px; margin:0px; padding:0px 0px 0px 160px; text-align:left; background-image:url(http://blog.seesaa.jp/img/bg/gerbera/header.jpg); background-repeat:no-repeat; }

  • ブログの投稿日時表示

    初めてのブログで困っています。 投稿した記事に日にちは表示されるのですが、時間が表示されません。 投稿記事及びコメントについて日時を表示したいのですが、どのようにカスタマイズすればいいのでしょうか。 教えて頂けると助かります。 関連しそうな設定は下記のとおりです。 宜しくお願いします。 /* 投稿記事単位 */ .postdate { width: 495px; margin: 0px 0px 70px 0px; padding: 0px; } /* 投稿記事の日付テキスト見栄え設定 */ .postdate h2 { width: 495px; color: #2D1805; font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; text-align: center; height: 23px; line-height: 23px; margin: 0px; padding: 0px 0px 0px 0px; background-image: url(/common/img/user/96-a/main_date.gif); background-repeat: no-repeat; background-position: top center; } .postdate hr { margin: 0px; }

  • ブログのメニューバーをヘッダー画像の下に

    seesaaブログでメニューバーをTOP画像の下に表示したいのですがわけがわからないんです。 どなたか教えて下さらないでしょうか? ちなみに設置はなんとかできました。 http://error911.seesaa.net/ CSSは ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url("http://error911.up.seesaa.net/image/bg.jpg?20090326204938") repeat-x top left; font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000; } ul#menu li { display:block; float:left; margin:0; pading:0; } ul#menu li a { display:block; float:left; color:#999999; text-decoration:none; font-weight:bold; padding:12px 20px 0 20px; height:24px; } ul#menu li a:hover { color:#FFFFFF; background:transparent url("images/over.jpg") no-repeat top right; }   です。お願いします。

  • divにも同じフォントスタイルを適用したい

    現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか?

    • ベストアンサー
    • HTML
  • ページの一番上にできた余分な余白の消し方

    ページの一番上に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
  • MT長所新車で

    超初心者です。ムーバブルタイプで、エントリーに画像をアップすることはできるのですが、トップのバナーにはアップすることができません。スタイルシートで何回も挑戦していますが、どこが間違っているのか、画像が反映されないのです。間違いを教えてください。 具体的に書きます。 #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } a#banner-img { }   となっているところを #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-image:<img alt="ue01.gif" src="http://www 略 width="××× heigho="○○○/>; background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } あるいは【例02】 #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-image:url<img alt="ue01.gif" src="http://www 略 width="××× height=" ○○○/>;  background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } としています。 どこがおかしいでしょうか。 またどのようにすれがいいでしょうか どなたか教えてください。

  • AOLダイアリーで、タイトルに画像を入れたい

    一度お聞きしていますが、うまくいきません ベーシックテンプレートを選び、 /* blogMainImage */ #banner { color: #FFFFFF; background: url(\"★\")no-repeat top; font-family: \"Verdana\", \"Arial\", \"sans-serif\"; text-align: left; padding: 15px; border-top: 1px solid #F08484; border-right: 1px solid #F08484; border-left: 1px solid #F08484; } ★の部分に、画像のURLを入れているのですが、表示されずにいます また、画像倉庫のようなものがどこなのか分からず(削除する時には見れますが) 毎回アップして、そのタグをコピペしている状態です 1.画像倉庫のようなものはあるのでしょうか? 2.画像の場所のアドレスをアップした時以降に見る場合、どこで見れますか? 3.タイトルに画像を入れたいのですが、どうすればよいでしょうか 『~~~と-----の間にxxxxxを入れます』というような説明をしていただけると大変助かります よろしくお願いします

  • CSSの背景がネスケだと表示されません(><

    IEだとちゃんと見れます。 CSSのタグが #top-bg { background-image: url("archives/img/top.gif"); height: 55px; width: 700px; } #banner { font-family: Verdana, Arial, sans-serif; color: #e40c5d; text-align: left; padding-bottom: 0px; padding-top: 8px; padding-left: 350px; padding-right: 0px; } で、こういう風に表示しています↓↓ <div id="top-bg"> <div id="banner"> <h1>ページタイトル</h1> </div> </div> どなたかよろしくお願いします…

    • ベストアンサー
    • HTML
  • CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

    こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE6で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"MS Pゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }

    • ベストアンサー
    • Mac