質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

wordpress の行間の開け方が分かりません

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,134

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がどこから来たのかも分かりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/11/23 15:17

    WordPressテーマはテーマ名と取得したURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • kei344

    2016/11/23 20:03

    コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • kei344

    2016/11/23 20:46

    コードのみを選択してコードブロック化してください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

    キャンセル

回答 1

checkベストアンサー

0

下記記述がCSSにあるなら、外してください。それはHTMLのhead領域に書くものです。それ以降に書かれたスタイルが無視される可能性があります。

<meta name="google-site-verification" content="3uP-cvmQXVIEfk21Pbdc6Ex_HcpHG-gtLCYyO7TXxU8" />

スタイルが適切に当たっているかはデベロッパーツールなどで調べられます。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01


また、HTML/CSSはカスタマイズには必須なので、一度本屋で何冊か本を買って読むことをお勧めします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/23 23:48

    やってみましたが、
    それをすると画面がほぼ真っ白になり
    just another wordpress site
    という文字だけが表示された状態になります。

    キャンセル

  • 2016/11/23 23:54

    line-height:30をline-height:3くらいにしてみてください。
    デベロッパーツールで状況の確認はしましたか?

    キャンセル

  • 2016/11/24 10:57

    line-height:30をline-height:3くらいに変えましたか?
    もう一度テーマをダウンロードして、CSSだけ最初からやり直すのが早いと思います。

    キャンセル

  • 2016/11/24 20:20

    ありがとうございました!テーマの再ダウンロードにより解決しました。本当に助かりました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる