WordPressは、Enterキーで改行すると、広い余白ができてしまいます。文章を書くとき、改行のたびに広い余白ができると、散漫な文章という印象を受けてよくありません。なぜこうなっているのか理解に苦しみます。私の想像では、WordPressがもともとブログから発展したからではないかと思います。ブログでは行間をあけて書くことを好む人が多いようです。それに合わせてこのような標準を作り上げたのではと予想します。
では、これを回避するにはどうしたらよいかというと、Shiftキー + Enterキーで改行すれば、広い行間があかずにきれいな文章になります。
しかし、下のよう一部字下げをしたい場合があります。
字下げをしたい部分の行頭に、スペースを1文字入れます。(上の1.2.3.の前にスペースを入れた状態です)
しかし、編集画面では上手に字下げされたように見えても、更新ボタンを押すと
このように、スペースは無視されて先頭に戻ってしまいます。
編集画面にはインデントしてくれるボタンがありますが、このインデントは段落(<p>タグ)に対して適用されるため、下のように字下げしたい部分にインデントを設定しても、
このように、段落全体が字下げされてしまします。これはWordでも同じですね。
前から気にかかっていたのですが、方法が見つからず、2つの改行方法で、左の先頭に一律揃いの、面白味のない文面に甘んじていました。しかし今回クライアントのサイトで、どうしてもこれではまずい状況になったので、いろいろ試してみました。
かくなる上は、段落と段落の間の行間を縮める(なくす)しか方法がありません。
それには、CSSを変更する必要があります。子テーマのスタイルシートに次のスクリプトを追加しました。
p { margin-top: 0px; }
しかしうまくいきません。ググッてみますと、下記サイトに有益な情報がありました。
http://tips.nishishi.com/css/box-paramargin.html
一般にブラウザは、段落(<p>タグ)と段落の間隔には、1行分の余白を入れている。(標準の1emのマージンが設定される) マージンは段落の上(top)と下(bottom)に設定されているが、隣接する段落の間では、どちらかのマージンの大きい方を採用するということです。つまり上(top)だけ指定してもだめで、topとbottomの両方を指定しないといけないということです。
そこで、子テーマのスタイルシートの追加部分を下のように変えました。
p { margin-top: 0px; margin-bottom: 0px; }
しかしこれでもうまくいきません。ググッたところもう一つのサイトがありました。
http://okwave.jp/qa/q1734671.html
これは、<head>…</head> の間に次のスクリプトを入れてしまうものです。
<style type=”text/css”
p { margin-top: 0; margin-bottom:0 }
</style>
<head>…</head> の中ですから、テーマの header.php に上記追加をしましたが、これでもだめです。
通常のWordPressならばこれでいくはずなのですが、私の使っている Twenty Twelve のテーマでは、まだ他にあるのでしょうか。ということで Twenty Twelve をキーワードに加えてググってみますと、今は存在しないサイトで次の事実がわかりました。
記事は全て <div class=”entry-content”> というclassが指定されている
ということです。そこで、スタイルシートの .entry-content p を探すと次のようになっています。
entry-content 以外にも他のクラスがありますが、影響なさそうなのでこれを子テーマのスタイルシートに移して下記のように変更しました。
子テーマに移しているので、ライン番号は変わっています。そうしますと、Enterキーで改行しても下のように、広い行間がなくなりました。
管理画面の編集画面ではまだ広い行間がありますが、これは別の個所で変える必要がありそうです。あとで考えましょう。
そしてHTMLのソースコードを見ても、確かに <p> タグで囲まれています。
インデントを適用してみると、このようにきれいにそろいます。行頭にスペースを入れても反映されます。(その後の確認で、行頭スペースは反映されないようです。方法がわかったらこのページで紹介します)
これで長年の課題が解決しました。これで、適度のインデントをつけた、わかりやすく美しい文面を作ることができます。
このサイトもいずれ変えたいのですが、本来行間を取りたくてEnterキーで改行しているところもいっぱいありますから、変えるときはサイト全体を一斉に見直さないといけません。