HTMLサイトのメニューバーの位置が異なる問題について

このQ&Aのポイント
  • HTMLページ内でメニューバーの位置がページごとに異なってしまう問題が起きています。
  • 同じHTML構文を使用しているはずなのに、index.htmlと他のページでメニューバーの下の余白部分が異なってしまいます。
  • 素人の私には解決できないレベルの問題です。ご教示いただける方がいらっしゃいましたら、お願いいたします。
回答を見る
  • ベストアンサー

ページ毎に位置が変わってしまう。HTML

サイト見ていただければ一目瞭然なのですが、メニューの行の下の余白部分がindex.htmlとそれ以外で違ってしまいます。 HTML構文はコピペしているので同じはずなのですが、素人同然の私としては限界です。 どなたかご教示お願い致します。 URLは http://frecklejp.com/ です。それではお願いします。 また、外部CSSファイル一応作っています。それは以下になります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー @charset "utf-8"; /* CSS Document */ /*====================================== すべて =======================================*/ body,td,th,Table_01 { font-family: Verdana, Tahoma, Arial, sans-serif, Meiryo UI; color: #666666; font-size:medium; } body { background-color: #FFFFFF; margin-left: 50px; margin-top: 100px; margin-right: 0px; margin-bottom: 0px; } /*====================================== リンク =======================================*/ a:link { color: #a9a9a9; text-decoration: none; } a:visited {     color: #a9a9a9;     text-decoration: none; } a:hover { text-decoration: underline; color: navy;  text-decoration: none; } a:active { text-decoration: none; color: navy; text-decoration: none; } /*====================================== ベース =======================================*/ メイン =======================================*/ t { line-height: 15px; margin-left: 30px } ui { list-style-type: square; } span-class { font-size: x-small; text-align: right } .div-class { border-width: 0px 0px 0px 10px; border-left-width: 5px; border-left-style: solid; border-left-color: firebrick; padding: 0px 0px 0px 6px; /* 余白の幅 */ } prof { font-family: Verdana, Tahoma, Arial, sans-serif, Meiryo UI; color: #666666; font-size:medium; }

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

>HTML構文はコピペしているので同じはずなのですが、素人同然の私としては限界です。 ウソウソ・・・ メニューの上の画像群のセル構造が違うでしょ・・・

lsd1105
質問者

お礼

ご指摘ありがとうございました。初歩的なミスでした。 メニューの下ばかり目がいってしまって… ありがとうございます。

関連するQ&A

  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、<a>で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか? ーーーーーーーーーーーーーーーーーーCSS----------------- img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS----------------- img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML---------------- <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、<a>で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか? ーーーーーーーーーーーーーーーーーーCSS----------------- img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS----------------- img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML---------------- <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • css で一部のハイパーリンクの色を変えたい

    デフォルトでは 27595a というカラーで各リンクに対してハイパーリンクを貼り、Title という ID 内のみハイパーリンクに触れた時やハイパーリンクそのものの色を白にしたい場合、どのように css を書けばいいいですか? 色々やってみたのですが、うまくいきません。 ご教授よろしくお願い致します。 <style type+"text/css"> a:link { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:visited { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:active { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:hover { text-decoration: none; color: #27595a; font-family: "Tahoma","メイリオ","Meiryo","Courier New"; } </style> <div id="Title"><a href="./" target="_top">Toppage</a></div>

    • ベストアンサー
    • HTML
  • 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
  • HEAD・HTMLの行間改行が上手くいかないです

    携帯サイトの『ナノ』のノベル機能を使い、HEAD内に下記の様に記入しました。 すると携帯では打った通りに打った通りに改行してくれたのですが、PCの方から見ると上手く改行をしてくれません。2回改行すると1行空くので、多分1回分をカウントしてくれていないのだと思われますが…。 PCに合わせると携帯画面では改行しすぎてしまうし、携帯画面で合わせるとPCではひどくキツキツになってしまいます。 HEADを弄るのは余り得意でないため、一体どこを直せば良いのかと頭を抱えています。 どこらへんが悪いに違いないというのも絞りきれないためにHEAD内に記入した物まるっと載せさせて頂きました。 不得意なまま色々と弄ったため、色々と必要ない物がくっついているかもしれませんが、 『どこを直せばPC画面と携帯画面で改行数が同じになるか』というのをお教えください。 ※因みに、改行して欲しいと思った文そのものに<br>を入れても同じ結果になりました。 言葉足らずや用語を知らないために分かりにくい質問内容になっていたら申し訳ありません…。 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS"/> <style type="text/css"> * { font-family:Arial,Osaka,Verdana,Helvetica,sans-serif;} body { scrollbar-track-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-arrow-color:#cccccc; scrollbar-shadow-color:#cccccc; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#cccccc; text-align: center; <pc>font-size: 90%; line-height: 1.7;</pc> padding:5px;} a:link,a:visited { text-decoration:none; border-bottom:dotted 1px #555555;} a:hover { text-decoration:none; color:#bbbbbb; border-bottom:dotted 1px #bbbbbb;} a:active { text-decoration:none; border-bottom:dotted 1px #555555;} input,textarea { margin:2px; padding:1px; color:#111111; background-color:#ffffff; font-size:85%; border:solid 1px #cccccc;} select,option { color:#555555; background-color:#ffffff; font-size:85%;} img { border:0;} /*1番目のbox*/ .all {<pc> width: 690px;</pc> margin: 0 auto; padding: 5px; text-align: left; border:solid 1px #dddddd; background-image:url('#mtr●_url#'); /*●の部分に素材番号を入れると敷き詰めの背景になります*/ background-repeat:repeat; background-position:right top;} /*2番目のbox*/ .header { <pc> width:700px;</pc> margin: 0 auto; padding:0px; <pc>line-height: 1.2;</pc> letter-spacing:3px; font-size:150%; font-family:'Century Gothic',sans-serif;} .content { <pc> width:690px;</pc> margin: 0 ; <pc>line-height: 1.2%;</pc> font-size:80%; padding-top:0px; padding-bottom:0px;} .footer { <pc> width: 690px; clear:both;</pc> margin: 0 auto; padding:3px; <pc>line-height: 1.2%;</pc> letter-spacing:3px; text-align:right; font-size:70%;} /*3番目の枠(幅を設定しないこと)*/ .menu { border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd; <pc> height:1.2em;</pc> text-align:center; margin-bottom:20px; background-color:#ffffff;} .menu a:link,.menu a:visited{ <pc> display:block; line-height:1.2em; text-align:center; float:left; </pc> border:none; color:#333333; letter-spacing: 2px; padding-left: 15px; padding-right: 15px;} .menu a:hover { <pc> display:block; line-height:1.2em; text-align:center; float:left; </pc> border:none; color:#ffffff; letter-spacing: 2px; background-color: #dddddd; padding-left: 15px; padding-right: 15px;} .main{ margin: 0 auto; padding:0px; <pc>line-height: 1.2; </pc> letter-spacing:1px; /*以下三行(}は除く)背景の色が濃いとき用の白のフィルター背景です。いらない場合は消してください*/ background-image:url('#tmpImg11174-11_url#'); background-repeat:repeat; background-position:right top;} /*特殊*/ .f1{ <pc> width:150px; float:left;</pc>} .clear{ <pc> clear:both;</pc>} /*場所関係なし(好みで増減)*/ .text {margin:1px; padding: 0px; font-size: 100%; font-weight:normal; font-style:normal;} .box1{ padding:5px; margin:5px; border:solid 1px #ffffff;} .uline { border-bottom:solid 1px #dddddd;} .midashi1{ letter-spacing:3px;} .midashi2{ font-weight:bold;} .midashi3{ font-size:120%;} .big { font-size:120%;} .small{ font-size:70%;} </style>

  • ホームページ作成について。

    いつも、お世話になっております。 今回、一からサイトを作るのに当たってぶち当たった壁があり どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。 写真を展示するページを二分割上下のフレームを作ってるんですが このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。 メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等) をいくら調節しても、重なってしまいます。 http://cilo.web.fc2.com/photo-studio-room.html 上のURLが問題のページです・・。 そして下のが問題のスタイルシートです・・。 html{ scrollbar-arrow-color:#ccc; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ccc; scrollbar-track-color:#fff; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-color:#fff; } body{ background-image: url(); background-color:#fff; background-position:right top; background-repeat: no-repeat; background-attachment: fixed; padding:0; margin:0; text-align:left; } #sub{ width:980px; height:800%; } .main{ margin:10px 20px 10px 0px; padding:0px 0px 70px 0px; text-align:left; font-size:12px; line-height:1px; font-family:Verdana,Osaka,'MS P Gothic'; color:#999; } h1{ font-size:12px; color:#666666; text-align:right; font-decoration:none; font-weight:normal; font-family:'Georgia',Verdana,Osaka,'MS P Gothic'; margin:0px 270px 20px 0px; padding:0px 80px 0px 0px; } h2{ font-size:12px; color:#666; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; text-align:left; letter-spacing:10px; line-height:20px; text-decoration:none; margin:30px 0px 0px 10px; padding:5px 13px; } h3{ font-size:11px; color:#333; text-decoration:underline; margin:5px 10px; padding:0px 9px; } /* メニュー部分の設定 */ #menu { text-align:center; letter-spacing:3px; } #menu ul{ list-style:none; margin:50px 0px 0px 0px; padding:0px; } #menu li{ display:inline; } #menu li a{ display:block; color:#666; border:1px solid #666; background-color:#fff; margin:10px 55px 0px 35px; padding:5px; } #menu li a:hover{ background:none; } /* テキスト設定 */ .1{ line-height:15px; padding:10px 10px 0px 10px; } /* メルフォ設定 */ form table{ margin-left:30px; } td.name{ width:8em;color:#000; text-align:right; padding:5px; float:left; } input.name{ width:20em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } input.url{ width:25em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } textarea.text{ font-size:10px; line-height:15px; border:solid #000 1px; margin:0.5em 0; padding:0.5em; } td.post{ text-align: center; } input.post{ width:60px; height:21px; color:#000; font-size:10px; line-height:12px; background:transparent; border:solid #000 1px; text-align:center; margin:0.5em 0 0 1em; padding:0; } /* リンク */ a{ text-decoration:none; } a:link{ color:#999; } a:active { color:#999; } a:visited{ color:#999; } a:hover{ color:#00ccff; } /* 画像のボーダーを0にする */ img { border:none } /* カーソル設定 */ body{cursor:url();} a{cursor:url();} ご回答よろしくお願いします。

  • HP全体を左寄せ配置するCSSの記述について。

    HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px;  text-align:center;  line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。

    • ベストアンサー
    • HTML
  • blog CSSのタイトル色の変更指定について!!

    このblog CSSのブログタイトルの色変更はどうすればいいですか? .blogtitle の所で色指定してもダメでした?他に方法があるのですか? livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

    • 締切済み
    • CSS
  • ブログのタイトル文字色について。

    fc2でブログを始めました。 色々検討して、公式テンプレートの「life」というものを選択しました。 ただ、タイトルの背景画像だけ変更しようと思い、色々苦労した結果、変更できました。 しかし、タイトルの文字色が灰色のため、今のままではタイトルがひどく見づらいのです。 そこでタイトルの文字色を変更しようとしましたが、どうにもそれに該当する部分が分かりません。 以下にスタイルシートを貼りますので、どなたかご教授下さい。 body { font-family: Verdana ,sans-serif,Osaka; background: #eee; background-image: url(http://templates.blog.fc2.com/template/life/bacck6.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; font-size: 83%; line-height: 1.6; margin:0; color:#232323; } a:link { color:#bbb; text-decoration: none; } a:active { color: #999; text-decoration: none } a:visited { color: #777; text-decoration: none } a:hover { color: #d00; text-decoration: underline; } /* h1 を大きくとって、背景画像を見せてます。 */ /* 出来る人は div 要素なんか使って、テンプレ弄った方がいろいろいいかも */ h1 { background: #070; /* 背景を差し込む場合は高さ 150px ぐらい推奨 */ background-image: url(http://blog-imgs-59.fc2.com/n/a/m/namakedaruma/201304221809488f4.jpg); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; margin: 0; font-size: 150%; /* 文字の位置を変える場合、上下合わせて 6em 取るといいかも */ padding: 3em 3em; /* 位置を真ん中にしない場合は以下で文字位置設定 */ /* padding: 3em 0.7em 3em 0.7em; */ border-left: 1px solid #000; border-right: 1px solid #000; } h1 a:link { color: #fff; text-decoration: none; } /* h2 要素は現時点で、横向きカレンダーで被せてるんで擬似背景設定になってます */ h2 { background: #000; background-image: url(http://templates.blog.fc2.com/template/life/back2.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; margin: 0; padding: 0.5em; text-align: center; font-size: 100%; font-style: normal; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; border-top: 2px solid #000; border-bottom: 2px solid #000; } /* h2 要素に被る横カレンダー設定 */ .yokocal { position: absolute; left: 10%; top: 16em; border: 1px solid #000; background: #777; padding: 0.3em; text-align: center; margin: 0; font-size:75%; } /* 背景色透過で、h1 要素最下部に表示する場合や、横カレンダーを表示させない場合は、 以下の設定の方がしっくりきます。*/ /* 背景画像によって、文字色の変更 */ /* この場合は h2 要素が見えるようになります */ /* h2 要素の上下のパディング 0.5em が大きくて気になる場合は減らす */ /* 参考までに h2 要素の上下パディングを 0 にした場合、 以下で記述の right 属性の top のプロパティを 14.5em から 13.4em へ変更 */ /* .yokocal { position: absolute; left: 10%; top: 13em; padding: 0.3em; text-align: center; margin: 0; font-size:75%; } */ /* 横カレンダーの日付はリストを inline で横に並べてるので、不具合ある人もいるかも。*/ .yokocal li { color: #000; display: inline; margin: 0 0.1em; } .yokocal a{ font-weight: bold; } .yokocal a:link { color: #fff; text-decoration: underline; } .yokocal a:visited { color: #999; text-decoration: underline; } .yokocal a:hover { color: #f00; text-decoration: none; } /* レイアウト設定 */ /* レイアウト構成は left の中に right を左側に入れ込んでるという感じ。 そのために、left 属性では左に大きくパディングを取ってます。 ので、left でも実際は、右側に表示されることになります。*/ /* 記事表示部分 */ .left { margin: 0; margin-left:1px; padding: 0 0 0 18.7em; border: 1px solid #000; background: #fff; } /* メニュー部分 */ .right { background: #ffe; background-image: url(http://templates.blog.fc2.com/template/life/back3.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; width: 15.5em; border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; position: absolute; padding: 1.7em 0.7em; top: 14.5em; left: 0; color: #232323; /* left 属性のボーダーを使うためその分の余白 */ margin-left: 1px; } .right p{ margin: 0.3em; font-size: 80%; } .right a:link { color:#333; text-decoration: none; } .right a:active { color: #999; text-decoration: none } .right a:visited { color: #666; text-decoration: none } .right a:hover { color: #d00; text-decoration: underline; } /* メニューの見出し*/ .right h3 { font-size: 80%; font-family: Verdana ,sans-serif,Osaka; font-weight: normal; color: #000; letter-spacing: 0.1em; margin: 1.7em 0 0 0; padding: 0.2em 0.2em 0.2em 0.7em; background: #ffd; bo

  • リストに指定したマークの位置がずれてしまいます

    特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>

    • ベストアンサー
    • HTML

専門家に質問してみよう