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

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

新規登録して質問してみよう
ただいま回答率
86.12%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

解決済

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

igakuseizyouhou
igakuseizyouhou

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1回答

0グッド

0クリップ

2254閲覧

投稿2016/11/23 05:16

編集2016/11/23 22:18

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

2016/11/23 05:30依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「過去の低評価」という指摘を受けました。

kuck1u

2016/11/23 05:30

テーマのリンク・有料 or 無料を記述してください。
kuck1u

2016/11/23 05:31

自身でトライした内容をソースコードなどを交えて、詳しく記述してください。
kei344

2016/11/23 06:17

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

2016/11/23 11:03

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

2016/11/23 11:46

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

回答1

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 13:59

編集2016/11/23 14:02
kei344

総合スコア69020

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

igakuseizyouhou

2016/11/23 14:48

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

2016/11/23 14:54

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

2016/11/24 01:57

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

2016/11/24 11:20

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

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。