WordPress4.6にアップデート後に行間が変わり元に戻したい

受講料のところですかね？

それ以外はだいたい同じように思うんですけれども。
で、受講料のところだったらbrが入っているからだと思います。

ご覧になられたのは今今ですよね？
大体同じに見えるのは、投稿してから
コピー&ペーストで無理やり合わせていたからなのですが、
依然問題の根本は変わっていません。
受講料も今コピペしたところです。

でも、brが入っていたらそれをどのようにしたら、
行間が狭くなりますでしょうか？

http://inspirationavatar.com/what-is-avatar/
例えばこのページの一番下にある部分で、
アバターがあなたのためのものであるか見分け方法のところで、
・
・
・
とありますが、今までならこのスペースは空いていなくて
詰めてあったのに、今は空いてしまっています。
これがアップデート後に起きたことだと思うのです。

この直し方がわからなくて困っています。
どうか助けてください。

そして過去の記事も行間が広くなってしまっていて、
それを直そうといじると余計に広がってしまうという
悪循環に陥っています。
何が起きているのでしょうか？

今自分のページの全ての記事を確認しました。
やはり全てにおいて行間が広くなっているようで、
何もいじらなくても、編集を押しただけで広がっています。
アップデートによるそもそもの変更があったようです。
これを元に戻すにはどうしたらいいかを教えてください。
見栄えはとても大事にしているところなので、よろしくお願いします。

http://inspirationavatar.com/avatar-course/
これは私の推測ですが、こちらのページの受講料の部分の行間が一つ空いているところが、
他のページの行間空きに共通している部分だと思います。

本来この部分はこのページの受講料の感じと同じになっていたので。
http://inspirationavatar.com/avatar-course/blog-27/

以前はこういう時はアメブロのブログに貼り付けてから
Wordpressに貼り付け直すことでクリアになっていましたが、
今回はいろいろ試してみましたが、できませんでした。

なんとか解決したいです。どうぞよろしくお願いします。

全体的にかどうかは全部のページを見ていないのでわかりませんが、現状を見るに、

<p>
何かしらのテキスト
<br></br>
</p>

こういう段落の中に改行が入っていることでの行間が広く見える現象かと思います。
ビジュアルエディターの使い方に問題があるのではないかと思うんですが、テキストモードで不要なbrを削除すればよいのではないかと。

例えば、こちらの第2部 エクササイズの手前も不要なpが入っています。ここはbrではなくpですが僕からしたらここもおかしいわけです。

同じページで「ようこそアバターコースへ」というのがありますがここもズレてます。また多くの箇所においてstyleタグでスタイルされているのもあまりオススメできる書き方ではありません。
ブラウザは毎回ページを読み込むたびにこのスタイルタグを処理します。なので子テーマstyle.cssに共通部分のスタイルをクラスで書き直し、該当部分にクラスで適用するべきです。

そうすれば、style.cssを1箇所修正すれば適用箇所は全体的に修正されます。1つの要素に1つのスタイルだとそれだけブラウザは処理していると言うことです。クラス定義がアレば、同じクラスの処理は1回で済みます。中の文字なり、画像が変わるだけなわけです。

これらはp中のbrとはやや意味合いが違いますがページが増えていく前に直したほうが良いかと思います。

hidekichiさん、

＞ビジュアルエディターの使い方に問題があるのではないかと思うんですが、テキストモードで不要なbrを削除すればよいのではないかと。

こちらを実行したのですが、依然変化がありません。
何が違うのでしょうか？

＞また多くの箇所においてstyleタグでスタイルされているのもあまりオススメできる書き方ではありません。
ブラウザは毎回ページを読み込むたびにこのスタイルタグを処理します。なので子テーマstyle.cssに共通部分のスタイルをクラスで書き直し、該当部分にクラスで適用するべきです。

こちらに関してはすみません、理解できていません。

改行は文章のバランス上よく使うので、
改行した時の行間を狭くするにはどうすればいいですか？
全体のstyle.cssをいじる以外に個々の設定ではできないのでしょうか？

> 改行は文章のバランス上よく使うので、

まずここが違います。
本来の姿と言うのは、cssを適用していないhtmlの状態で中身が正しく読めるのが一番良いとされています。全盲の人にいくら飾ったページを見せても中身が読めなければ意味がないですよね。全盲まで行かずとも色盲の人に対してもそうです。

デフォルトのリンクの色使いが全ての色盲の人に正しく機能しているとは言えませんが、最近ではアフィリエイトのためのサイト作りがなされることが多いので、とにかく目立つとか派手にすると言う傾向が強いです。それはこれら視力に何かしらの不自由がある人や、その演出を必要としない人にとっては必要な情報ではありません。

必要なのは中身です。さてここで話は戻り、htmlで正しく読めるのが是なわけですから、例えばPタグやbrタグというのはその機能がなされて初めて意味があるわけです。pは段落です。brは改行です。段落の中に改行があるのは何も問題ではありません。

文章は改行を必要とする場合ももちろんありますから、例えば、

<p>何かしらのテキストの区切り<br>次の文章...</p>

この使い方は正しいわけです。が、

<p>何かしらのテキストの区切り<br></p>
これは誤りです。段落の最後にbrは不必要です。Yさんが言われている「文章のバランス上」これを考えた場合、

<h3>タイトル</h3>
<p>テキストA</p>
<p>テキストB</p>
<p>テキストC</p>

こうあった場合に、スペースを開けるためだと

<h3>タイトル</h3>
<p>テキストA<br></p>
<p>テキストB</p><br>
<p>テキストC</p><br><br>

こういうことはしません。pはブラウザのデフォルトで前後にマージンを持っています。なのでcssを適用せずとも段落の前後はスペースが開くわけです。cssと言うのは、このブラウザがデフォルトで持っているスタイルを上書きすることで行います。
例えばpの前後にスペースがほしいが、最後のpの後にはスペーは要らないとした場合、

p {
  margin: 0; /*初期化*/
  margin-bottom: 2em;
}

p:last-child {
  margin-bottom: 0;
}

このようにすれば、

<h3>タイトル</h3>
/*見出しのマージン*/
<p>テキストA</p>
/*pのマージン*/
<p>テキストB</p>
/*pのマージン*/
<p>テキストC</p>

こうなります。元々pの前後にmarginがあるのを一旦初期化して、かつ下にだけマージンを設定し、最後の要素にはそのmargin-bottomをクリアすると言うスタイルです。最初の初期化のことをリセットとかノーマライズといいます。

これらは、cssの偉い人が考えたどのブラウザでも同じように見えるようにしようと言うreset.cssなどのことを示してもいますが、デフォルトを単に初期化することをリセットすると言ったりします。一方、ブラウザデフォルトにすることはイニシャライズといいます。まぁ初期化ですよね。

つまりここで言いたいことは、行間デザインやスペースと言うのは段落や改行で行わず、cssでデザインすると言うのが正しい流れです。なぜなら、先に話した目の不自由な人たちや、考え方の特殊な人たちは、ページが読み込むcssを適用せず、自分のやりやすいスタイルに変更している可能性があり、その人たちは素のhtmlの状態で見ていると仮定した場合に、使い方のおかしいタグと言うのは「なんでここにこれが入っているんだろうか？」と言う疑問を持つ部分であるわけです。

僕も、これまでにわいひらさんに散々言ったりしましたが、不要なタグが入っているとか、使い方がおかしいとか、こうするべきだとか、それらはこういった理由もあります。

かと言って必ずしもそういう人たちだけが見ているわけではありませんから、別にpを見出しにしようが何だって構わないわけです。aタグオンリーで全部のスタイルをデザインすることだってできるわけですから。画像は読み込めませんけどね。リンクは出来るので、なんとかなります。

またcssは設計図です。この後で説明しますが、スタイルタグとcssの違いは、ページ表示速度にも影響しますし、中の書き方にも影響します。

例えば信号。赤は止まれ、青は進めこれはこういうルールなので誰しもが色を見ただけで判断できますよね？つまりは一般社会の共通ルールです。なので、いちいち赤は止まれなのでブレーキなんてことは考えず、赤になったら止まると言うことをします。

じゃあ緑はどうなんだ？って話ですよ。赤は止まれでそれじゃないから、進んでも良いんだろうか？と思いつつゆっくり進みます。一度問題なくいけたら、次からその信号では行ってもよいのだと学習して進むのにためらいはなくなります。

良い例ではありませんが、これをcssでいうと、

.signal .red {
  move: stop;
}

.signal .blue {
  move: go;
}

こんなプロパティはありませんが、これをタグにした場合、

<div class="signal blue">進め</div>
<div class="signal red">止まれ</div>

になるとしましょう。スタイルタグと言うのは、

<div style="color: green;">進め？</div>

こういうものを言います。例えば、
<div class="signal blue">take care!</div>

こう書いてある場合、色が青なので文字がなんであっても進んで良いとブラウザは判断します。つまり青で表示するわけです。一方、

<div style="color: green;">クマ出没注意</div>

とあった場合は、ブラウザは、このタグの部分でスタイルタグを処理します。これなんだっけ？と言う感じでイチから処理するわけです。

cssにはルールがあって、後から読み込んだものが優先されます。外部スタイルシート(Simplicityで言うとstyle.css等)は、ページの読み込み時に最初の部分で読み込まれます。なので、何かしらで後から上書きすれば状態を変更できますが、このstyleタグと言うのは、この部分で処理をするため多くの場合(ほぼ9割)最終出力になります。しかも毎回の処理です(ページ自体がキャッシュされている場合があるのでその全てではありませんが)。

ついでに説明すると、ページの読み込み時にcssだけ書き出すと、抜粋ですが、

0.ブラウザのデフォルトのスタイル
<head>
  1.親テーマstyle.css
  2.子テーマstyle.css
  3.styleタグ(カスタマイザの設定等)
</head>
<body>
  4.各タグのstyle属性
</body>

こういう順序で処理されます。数字が大きい方が最終出力です。4を上書きできるのは、ページの読み込みが完了してから動作する(あるいはDOMの解析後に動作する)javascriptのみです。

先ほどの信号で緑の部分を2に書けば、例えば、

.signal .green {
  move: slowdown;
}

こうなり、

<div class="signal green">徐行</div>

こう書けるわけです。もし仮に、緑は進めと一般的な日本のルールを共通させるのであれば、

.signal .blue,
.signal .green {
  move: go;
}

こういうことです。もしかしたら、

.signal .blue,
.signal .green {
  move: go;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

こんなふうにスタイルして、それぞれの色を指定してもよいかと思います。cssで予め共通のルールを作っておけば、記事の中は、<div class="signal green">徐行</div>だけで済みます。いちいちサイズがどうだのと指定する必要はありませんし、cssはすでにレンダリングされてますから、中の文字が変わるだけです。

気が変わって、信号の青も緑も徐行にするとした場合、このcssのgoをslowdownに変えるだけでどちらも変更できます。これがcssの基本であり、htmlの書き方です。

見た目のデザインはcssで書き、できるだけ素のhtmlでも問題がないように読めるようにするのがGoodで、最悪何かしらを意図的にデザインする場合はクラス名やalt属性、title属性等に配慮するべきだと言うことです。

つまり、「改行は文章のバランス上よく使う」はhtmlでは誤りで、そういう場合はそのバランスをcssでスタイルしましょうと言うことです。

ここまで読んでもらったらある程度理解してもらえると思いますが、「改行した時の行間を狭くするにはどうすればいいですか？」の答えは、改行を使わないです。それが一番狭く、かつ段落のスペースでスタイルすればよいだけのことなんですから。

よって前の回答にも書きましたが、不要なbr(p)タグを取り除くが正解です。

念の為、受講料部分のサンプル作りました。

サンプル: データリストのサンプル | jsFiddle

こんな感じにすれば、必要なタグに必要なデータが入っていて仮にcssがなくても意味がわかります。見た目はアレですけどね（笑）
細かく制御する場合は、更にspan等にクラスを入れたりとか、別のspan等を追加でしょうか。

テキスト自体にスペースも不要で、リストの間の間隔が必要ならサンプルの.testにline-heightを入れればよいのではなかろうかと。

サンプルのflexにはベンダープレフィックスはついてませんので、別途つける必要があります。
codepenにcssを貼り付けて、設定でcssをscssに変え、Vendor Prefixingで、Autoprefixerを選択します。
css欄の下向き三角ボタンから、view compiled を選び、変換されたcssにはベンダープレフィックスがついてるかと思うので、それをcssとしてstyle.cssに適用します。もちろん.testは任意のものに変更してください。

こうしておけば、サンプルで言う.test配下にあるddやdtは、cssのとおりに表示されます。後は、htmlの構造を真似して中身のテキストを変更するだけです。

Hidekichiさん、

違うものをはっきりと違うと言っていただいてありがとうございます！
とても勉強になりました！

そもそもの考え方から変えていかなければならないなと思いました。
教えていただいた通りにやってみます。
ありがとうございました！