
tpl_021_rwdのテーマを使っているのですが、行間(上の文字と下の文字の間隔)を開けることができません。
スマホ向けサイトでは正常に表示されるのですが、パソコンでのみ行間が狭いです。
lineheightなどをつかってスタイルシートの調整をしてもうまくいきません。どうすればいいか教えて欲しいです。
追記
情報が不十分で失礼しました。テーマを取得したサイトとURLは
無料ホームページテンプレート.com
です。
このサイトの
無料レスポンシブWordPressテーマNo.021というもの使っています。
ワードシートの外観→テーマの編集→スタイルシート(style.css)の
最初が
@charset "utf-8"; /* Theme Name: tpl_021_rwd Theme URI: http://theme.o2gp.com/ Description: tpl_021_rwd Version: 1.0 Author: o2 Group Author URI: http://theme.o2gp.com/ Tags: simple o2 Group v1.0 http://theme.o2gp.com/ This theme was designed and built by o2 Group, whose blog you will find at http://theme.o2gp.com/ The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ /* =Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;} :focus{outline:0;} ol, ul{list-style:none;} table{border-collapse:separate;border-spacing:0;} caption, th, td{font-weight:normal;text-align:left;} blockquote:before, blockquote:after,q:before, q:after{content:"";} blockquote, q{quotes:"" "";} a img{border:0;} figure{margin:0} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} /* -------------------------------------------------------------- */ <meta name="google-site-verification" content="3uP-cvmQXVIEfk21Pbdc6Ex_HcpHG-gtLCYyO7TXxU8" /> body{ color:#333; font-size:12px; font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","MS 明朝","MS PGothic",Sans-Serif; line-height:30; -webkit-text-size-adjust:100%; }
となっていて、下から3行目のline heightのところの数値を大きくしても行間が変わりません。
また、タイポグラフィーのところの真ん中のあたりにあるline heightも変えてみたのですが、変わりません
/* タイポグラフィ *****************************************************/ .dateLabel{ margin:0 0 10px; text-align:right; font:italic 1em "Palatino Linotype", "Book Antiqua", Palatino, serif; } .post p{padding-bottom:15px;} .post ul{margin:0 0 10px 10px;} .post ul li{ margin-bottom:5px; padding-left:15px; background:url(images/bullet.png) no-repeat 0 8px; } .post ol{margin:0 0 10px 30px;} .post ol li{list-style:decimal;} .post h1{ margin:20px 0; padding:5px 0; font-size:100%; color:#000; border-bottom:3px solid #cf6a88; } .post h2{ margin:10px 0; padding-bottom:2px; font-size:100%; font-weight:normal; color:#333; border-bottom:2px solid #cf6a88; } .post h3{ margin:10px 0; font-size:100%; font-weight:normal; color:#777; border-bottom:1px solid #cf6a88; } .post blockquote{ clear:both; padding:10px 0 10px 15px; margin:10px 0 25px 30px; border-left:5px solid #ccc; } .post blockquote p{padding:5px 0;} .post table{ border-collapse:collapse; margin:5px auto 15px auto; } .post table td{ border-collapse:collapse; background-color:#F9F9F9; text-align:left; padding:8px; border:1px solid #D6D6D6; line-height:20px; } .post table th{ background-color:#F5F5F5; text-align:right; padding:8px; white-space:nowrap; color: #151515; border-top:1px solid #D4D4D4; border-right:4px solid #D4D4D4; border-bottom:1px solid #D4D4D4; border-left:1px solid #D4D4D4; font-size:13px; font-weight:normal; letter-spacing:1.5px; background-repeat:repeat-x; background-position:top; } .post dt{font-weight:bold;} .post dd{padding-bottom:10px;} .post img{max-width:100%;height:auto;} img.aligncenter{ display:block; margin:5px auto; } img.alignright, img.alignleft{ padding:4px; margin:0 0 2px 7px; display:inline; } img.alignleft{margin:0 7px 2px 0;} .alignright{float:right;} .alignleft{float:left;}
※上の
.post table td{ border-collapse:collapse; background-color:#F9F9F9; text-align:left; padding:8px; border:1px solid #D6D6D6; line-height:20px; }
のところを変えてみました
また、
PC用のところも変えてみましたができませんでした。
/* PC用 ------------------------------------------------------------*/ @media only screen and (min-width:960px){ nav div.panel{ display:block !important; float:left; } a#menu{display:none;} nav#mainNav{ clear:both; z-index:200; position:relative; } nav#mainNav .inner{ width:932px; padding:0 20px; } nav#mainNav ul li{ float:left; position:relative; } nav#mainNav li:last-child{border-right:1px dotted #D6D6D6;} nav#mainNav ul li a{ display: block; text-align: center; _float:left; font-size:14px; width:154px; height:30px; padding-top:10px; color:#333; border-left:1px dotted #D6D6D6; } nav#mainNav ul li a span,nav#mainNav ul li a strong{display:block;} nav#mainNav ul li a span{ color:#cdcdcd; font-size:12px; } nav#mainNav ul ul{width:160px;background:#f9f9f9;} nav#mainNav ul li ul{display:none;} nav#mainNav ul li:hover ul{ display:block; position:absolute; top:45px; left:-2px; z-index:500; } nav#mainNav ul li li{ margin:0; float:none; width:160px; border:0; } nav#mainNav li li:last-child{border:0;} nav#mainNav ul li li a{ width:auto; height:auto; padding:20px; font-size:95%; text-align:left; border:0; } nav#mainNav ul li li span{padding:0 10px;} nav#mainNav li.current-menu-item li a{ color:#333; } nav#mainNav li.current-menu-item a,nav#mainNav li a:hover,nav#mainNav li.current-menu-item li a:hover{ color:#909090; background:#f9f9f9; padding-top:10px; } #mainBanner{margin-left:15px;} #header,#wrapper,.inner{ width:960px; padding:0; margin:0 auto; } #wrapper{padding-bottom:20px;} #main{ float:right; width:717px; padding:15px 15px 15px 0; } #sidebar{ float:left; width:195px; padding:15px 0 15px 15px; overflow:hidden; } .logo{width:500px;}
※上の部分のheightを変えてみました。
nav#mainNav li li:last-child{border:0;} nav#mainNav ul li li a{ width:auto; height:auto; padding:20px; font-size:95%; text-align:left; border:0; }
最終的にwordをつかって、line heightと調べ、片っ端から全部大きくしてみましたが、変化はありませんでした。
htmlやcssの知識が少なく、不適切な質問で失礼しました。
※追記2(11月21日)
デベロッパーツールを開けたところ以下のようになりました。
このように、heightが79とかになっていて、色が薄くなっていて編集できません。
この79がどこから来たのかも分かりません。
回答1件
あなたの回答
tips
プレビュー