• 締切済み

スタイルシート教えて下さい

ブログのトップページの一番上の部分を 自分の作った画像に変えました。 それはうまくいったのですが、 その部分にブログサイト名と説明文が入るのですが、 自分の画像を貼り付ける前までは一番左にあった文字が 今は真ん中に表示されてしまうんです。 ブログ名（リンクつき）とブログの説明文を左に表示させるには どうしたらいいのか教えて下さい。 その部分のスタイルシートです↓ #banner{ background-image:url(http://△△△△/○○○/□□□.jpg); background-repeat:no-repeat; background-position:left top; font-family:arial, Helvetica; padding:0px 0px 0px 197px; height:197px; text-align:left; margin-left:13px; }

みんなの回答

回答No.2

paddingを「padding: 0 0 0 20px;」に書き換えてみてください。 もしかしたら改善されるかもしれません。

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

padding:0px 0px 0px 197px;になってますが、左側197px空けて文字を開始させたいのに、完全にセンター配置になっているということでしょうか？ 他にブログ名と説明文に関する記述はありませんか？

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • seesaaブログを作成中です。

    seesaaブログを作成中です。 ■質問１■ブログの一番上左に画像を入れるとブログ名と重なってしまいます。重ならない方法を教えてください。ブログ設定「ブログタイトル」入力の始めの方を空欄にする以外でよろしくお願い致します。下↓はスタイルシートのバナー部分です。このどこかを直すのでしょうか？ #banner{ font-family:arial, Helvetica; color:#FFF; background:#032550; margin:0px; width:100%; padding:10px; background-image: url(http://画像 ) ; background-position : left top; background-repeat: no-repeat ; } ■質問２■ 記事の上下に出てくる　　- 1 2 3 4 5.. 次の1件>> 　を消したいのですがわかりません。自分なりに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; }

  • ｃｓｓ　ブログタイトル位置の動かし方

    gooブログのカスタムテンプレート「カスタムブルー」を使っています。 cssでブログTOP画像をいじっているのですが、 背景画像を挿入した際に、元々組み込まれている自身のブログタイトル、 およびブログの説明文が挿入した画像の隠れて欲しくない部分と 重なってしまいます。 左右への移動は　「paddinng-left」にて出来たのですが 上下への移動が出来ず（paddinng-top or bottomでは動かず)困っています。 （ブログタイトル＆説明文をもう少し上の位置にずらしたいのですが。。） 位置の設定の仕方が間違ってる、もしくは何か別の方法があるのでしょうか？ ---------------------------------------------------------------- /* ブログのタイトル部上 */ .headerLight { background-image: url(挿入画像のurl); background-repeat: no-repeat; background-position: center; background-color: #D8BFD8; height: 300px; } /* ブログタイトル部等の区切り線 */ .rule { background-color: #7B68EE; border-color: #ffffff; border-style: dotted; border-width: 3px; } /* ブログのタイトル部下 */ .headerDark { background-image: url(); background-repeat: ; background-position: ; background-color: #D8BFD8; } /* ブログのタイトル */ .bTitle { color: FFF0F5; font-size: 22px; font-weight: bold; font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka; padding-left: 70px; 　　　 } /* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */ .bTitleLink { text-decoration: none; } /* ブログの概要 */ .bDesc { color: #ffffff; font-size: 12px; font-weight: bold; padding-left: 100px; } --------------------------------------------------------------- ※ＣＳＳ初心者です。 　よろしくお願いいたします。

  • スタイルシートを二つ並べたら一つが反映されない

    ホームページを作りましたが、背景があまりに殺風景だったので、画面の両端に画像を縦に並べて貼り付けようとしました。 色々調べて <style type="text/css"> <!-- body{background:fixed url(画像名) #ffffff repeat-y top right} --> </style> というソースを<head>～</head>間に打ち込めば、右端に画像が並んで表示されると分かりました。 左にも同様に画像を並べようと <style type="text/css"> <!-- body{background:fixed url(画像名２) #ffffff repeat-y top left} --> </style> と、先ほどのソースの下に打ったところ、最初に書き込んだ右の画像が消え、左の画像のみがあらわれました。 右、左を書き換えてもやっぱり上のソースは消え、下のソースのみ反映されます。 どうすれば両端共に画像が出てくるようになるでしょうか？

    • ベストアンサー
    • HTML
  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>　　←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話　123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ブログの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; }

  • ホームページビルダーでスタイルシートを使ったのですが？

    今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • 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を入れます』というような説明をしていただけると大変助かります よろしくお願いします

  • スタイルシートのpositionについて

    久しぶりの投稿となります。 まだまだ未熟なのですがスタイルシートでデザインし、それを使ってブログにする。ということを考えています 例えば #blog{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:100px; left:200px; } こんな感じでHTMLに組み込むと横幅500px縦100pxの上から100px、左から200pxの位置にある 枠で囲った表が出ると思うのですが、ここまではいいのです。 ここで文字を入れて過度に改行すると枠も自動的に伸びますよね？ つまり縦100pxを超える文字列を記述したときなどです。 これもいいのです。 ブログですから当然記事も2つ以上一つのページに表示することになるので #blog2{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:300px; left:200px; } とすれば#blogは上から100pxの高さで高さが100pxの枠が表示されると思うので#blog2は#blogの100px下に同じ条件で現れると思います。 これもいいのですが、#blogで100pxを超えて300pxの高さになる文章を書いたとします。 そうなると#blog2の上にかぶさってしまいますよね？ そうならないためにはどうしたらいいのでしょうか。。。 固定でいつも上の記事(#blog)の100px下。という感じに出来ないでしょうか？ 出来るならば4つくらい記事を書いても記事と記事との間にスペースが生まれるのでいいなぁと思ったのですが。。。 こうなると#blog(記事の一番目)の100px下に#blog2(記事の二番目)、その下100pxに#blog3(記事の3番目)さらにその下に#blog4(記事の四番目)というように。 説明がよくわからないと思うのでどのようにしたいか伝わらなかった場合どんどんお申し付けください。 よろしくお願いします

    • ベストアンサー
    • HTML
  • スタイルシートの背景の設定について

    http://hp.vector.co.jp/authors/VA013937/cssref/backgrou.html を参考にスタイルシートの背景をＧＩＦにしたいのですが、下記のように してもうまくいきません。何がおかしいのでしょうか？ （１）http://9999.com/image/top.gif 例えばここにＧＩＦがあるとして下記の記述であってますか？ ＵＲＬの部分に何をいれればいいのでしょうか？ /* タイトルバナー */ #banner { color:#000000; background:url(top.gif); margin : 0px 0px 0px 0px ; padding:13px 15px 8px 15px; text-align: left; border-bottom: 1px solid #999999;

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する