適度の字下げを実現するために段落の余白を縮める(余白をなくす)

WordPressは、Enterキーで改行すると、広い余白ができてしまいます。文章を書くとき、改行のたびに広い余白ができると、散漫な文章という印象を受けてよくありません。なぜこうなっているのか理解に苦しみます。私の想像では、WordPressがもともとブログから発展したからではないかと思います。ブログでは行間をあけて書くことを好む人が多いようです。それに合わせてこのような標準を作り上げたのではと予想します。

では、これを回避するにはどうしたらよいかというと、Shiftキー + Enterキーで改行すれば、広い行間があかずにきれいな文章になります。

しかし、下のよう一部字下げをしたい場合があります。

20150131doc1

字下げをしたい部分の行頭に、スペースを1文字入れます。(上の1.2.3.の前にスペースを入れた状態です)
しかし、編集画面では上手に字下げされたように見えても、更新ボタンを押すと

20150131doc2

このように、スペースは無視されて先頭に戻ってしまいます。

編集画面にはインデントしてくれるボタンがありますが、このインデントは段落(<p>タグ)に対して適用されるため、下のように字下げしたい部分にインデントを設定しても、

320150131doc

このように、段落全体が字下げされてしまします。これはWordでも同じですね。

20150131doc4

前から気にかかっていたのですが、方法が見つからず、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 を探すと次のようになっています。

20150131doc5

entry-content 以外にも他のクラスがありますが、影響なさそうなのでこれを子テーマのスタイルシートに移して下記のように変更しました。

20150131doc6

子テーマに移しているので、ライン番号は変わっています。そうしますと、Enterキーで改行しても下のように、広い行間がなくなりました。

20150131doc7

管理画面の編集画面ではまだ広い行間がありますが、これは別の個所で変える必要がありそうです。あとで考えましょう。
そしてHTMLのソースコードを見ても、確かに <p> タグで囲まれています。

20150131doc8

インデントを適用してみると、このようにきれいにそろいます。行頭にスペースを入れても反映されます。(その後の確認で、行頭スペースは反映されないようです。方法がわかったらこのページで紹介します)

20150131doc9

これで長年の課題が解決しました。これで、適度のインデントをつけた、わかりやすく美しい文面を作ることができます。
このサイトもいずれ変えたいのですが、本来行間を取りたくてEnterキーで改行しているところもいっぱいありますから、変えるときはサイト全体を一斉に見直さないといけません。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る