• ベストアンサー

So-net blog で記事の行間を変えたい

こんにちわ。 何か記事の一行一行の高さがありすぎて、気持ち悪いと思っています。 CSSのカスタムスキンで 該当しそうなところにline-height: 110%;といれたのですが 行と行の高さはつまりません。 どうすると直すことができますでしょうか? ちなみに、記事は一文一文をPタグで囲っています。 /* Articles */ #main { width:540px; overflow:hidden; } .articles { width:498px; padding: 8px 14px; margin-bottom:8px; border:1px solid #cccccc; overflow:hidden; line-height: 110%; } .articles p { line-height:110%; } .articles-title { background:url("/blog/_images/blog/_98a/***/9943895.jpg") no-repeat left center; margin:10px 0 10px 0; padding-bottom:7px; padding-left:22px; border-bottom:1px solid #cccccc; font-size:small; } .articles-body { line-height:110%; } .articles-body p { line-height:110%; } 参照↓ http://blog.so-net.ne.jp/blog-help/css_tag

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

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

.articles-body p { margin:0 !important; } で出来たってことは、どこかに上書きするようなものがあるってことか。

noname#58101
質問者

お礼

ありがとうございました!!! .articles-body p { line-height:140%; margin:0 !important; } とやってみたらできました!!!!

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

noname#57571
noname#57571
回答No.1

> ちなみに、記事は一文一文をPタグで囲っています。 もしかして、それが原因ではないですかね‥?

noname#58101
質問者

お礼

アドバイスいただきありがとうございました! ↑の方のimportantのタグを追加したらできました!

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • floatとclearを使ったレイアウト作成について

    http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Web</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。

    • ベストアンサー
    • HTML
  • HTMLでトップページの画像およびリンクのランダム表示について

    どなたかお力を貸して下さい。 現在HPを作成中なのですがそのHPのトップページに表示される画像と、 それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。 添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。 HTMLは <h2>New!!新着製品</h2> <div class="itemlist"> <div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div> <h3>機種名</h3> <p>販売ページへ飛ぶ</p> </div> スタイルシートは #main .itemlist { border: 1px solid #CCCCCC; /*1個あたりのボックスのボーダー設定*/ padding: 5px; overflow: hidden; margin-bottom: 0.5em; width: 673px; /*段落タグ(p)の横幅とサイズを合わせる設定です。この下二つのmarginも。*/ margin-right: auto; margin-left: auto; } #main .itemlist h3 { color: #000000; border-bottom: 1px solid #cccccc; border-left: 4px solid #CCCCCC; padding: 0px 0px 0px 5px; margin-bottom: 0.5em; font-size: 100%; } #main .itemlist p { padding: 0px; } #main .itemlist p, #main .itemlist h3 { margin-left: 265px; /*画像の幅に合わせてここは変更する*/ } #main .itemlist a img { padding: 5px; /*写真と外線との余白*/ border: 1px solid #CCCCCC; } #main .itemlist a:hover img { border: 1px solid #999999; } #main .itemlist div.img { float: left; } なのですが相当難しいでしょうか?

    • ベストアンサー
    • HTML
  • 画像のtext-align:center;について

    http://loveosan0801.uijin.com/content/ishida.html 上記URLの画像がcenterに配置されません。 どのように修正すれば、centerに配置されますでしょうか? お教えいただけませんか? body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #center p { text-align:center; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }

    • ベストアンサー
    • HTML
  • HTML 微妙なずれを修正したいです。

    http://matsudamakoto.web.fc2.com/index.html 上記URLの ナビゲーションと画像が微妙にcenterからずれてしまっているように感じます。 これらをうまくcenterに表示する方法を教えていただけませんか? cssのソースを提示させていただきます。 よろしくお願いいたします。 body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }

  • 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>

  • IEだけで配置したボックスがずれて困っています。

    DIVでボックスを配置してレイアウトをしています。 IE以外では、問題なく中央に配置されるのに、 IEのバージョン関係なく、上のボックスがずれてしまいます。 スターハックなどを使ってもダメでした。 問題箇所を下記に明記しますので、解決策を教えてください。 宜しくお願いします。 .top p{ background-image:url(../img/basis/br.gif); background-repeat:repeat-x; width:720px; height:35px; z-index:2; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px; text-align: center; float: left; position: relative; border: 1px solid #0033FF; } .h2-img{ width:800px; padding:0px; margin:0px auto 0px auto; border: 1px solid #009900; background-color: #009900; } /*---メニュー類---*/ .m-bar { border: 0; padding:0; overflow:hidden; height:35px; width:720px; position:relative; margin-top: 60px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; right: 0px; float: left; display: block; background-color: #333399; }

    • 締切済み
    • CSS
  • FC2ブログ テンプレートのCSS編集について

    こちらのテンプレート http://labyrinth2014.blog.fc2.com/ 記事が長くなると、右サイドメニューの背景が 下部のフッターから離れてしまいます。 この背景は画像になっていますが、記事の長短に関わらず、 フッターまで伸ばすには(繋がるように)どうしたらよいでしょうか。 /* 全体の幅 -------------------------------------------------*/ #container{ text-align: left; width: 950px; padding: 0px; border-right:1px solid #ddd; border-left:1px solid #ddd; margin:0 auto; line-height: 110%; background-color: #fff; } /* 右カラムの幅 -------------------------------------------------*/ #right{ float : left; width : 280px; overflow: hidden; background-color: #eee; background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/gray3.png); background-repeat:repeat; } /* メインの幅 -----------------------------------------------*/ #main { float : left; width : 670px; margin:0px; padding: 0px; overflow: hidden; } ・ ・ ・ 中略 ・ ・ ・ /* サイド右側*/ .sidetitle{ color: #333; font-size:16px; font-weight : bold; text-align: left; background: url(http://blog-imgs-35.fc2.com/w/e/b/weboook/whiteline.png) repeat; padding: 5px 5px 6px 8px; margin : 0px 0px 0px 0px; } .sideblock{ font-size:12px; line-height: 150%; padding: 10px 5px 10px 5px; margin-bottom:15px; } .side ul { padding: 0px; margin : 0px; } .side li { list-style-type : none; display:block; text-align: left; font-size: 12px; color:#333333; line-height: 130%; } .side li a { padding:6px 5px 5px 10px; display:block; border-bottom:1px solid #ddd; } .side li a:hover{ background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/bgGray.png); background-repeat:repeat; text-decoration:none; padding:7px 4px 4px 11px; } よろしくお願いします。

  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またsafari、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 *html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="#”></div> </div> <span id="menu"><ul><li><img src="#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li><li><img src=”#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li></ul></span> <h2><img src="#" alt="#" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ~~ ~~ </div> <div id="footer"> <span align="center">&copy;#</span> </div> </div> </body> </html> *css body { font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:30px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • CSSを用いた角丸の枠(フタ-中身-底)の作り方を教えてください。

    こんにちは。 こんな角丸の作り方が知りたいです。 フタ(画像)   ┌─────┐(実際は角丸の画像) 中身(左右の罫線)│     │ 底(画像)    └─────┘(実際は角丸の画像) 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部(底部)と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。

  • 角丸にしたDiv内の画像の角がはみ出してしまう

    よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">¥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Aタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">¥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Bタイプ</p> </div> </div> </body> </html>

    • ベストアンサー
    • CSS