WordPressの行間を調整したいんだけど！
どうも、Linです。尿道、躍動してます。
WordPressでサイトを運営しているとたまに、
行間を調整したいな・・・・
という瞬間があることでしょう。
ぼく自身、Emanon
というテーマで運営していたWordPressサイトで、
「あれ、行間空きすぎてないか？」
と思うことがあったのです。
次のようなHTMLコードに対して、
|
1 2 3 4 5 |
<p>ちょっと行間が広すぎるような気がしています。<br> いや、ぼくの気のせいかな？<br> うーん、どうなんだろうね？</p> <p>いや、そんなことないはず。調整してもいいでしょ。</p> <p>調整しよう。</p> |
次のような表示↓
文字と文字の間の行間が空きすぎていて、ブログの中身の無さが余計に際立っているように感じてしまったのです笑
そこで今日は、ぼくと同じように行間がスカスカに開いたり、ぎゅうぎゅうに詰まったりしてしまっている方のために、
WordPressの行間を調整する方法
をまとめてみました。
WordPressの行間には2種類ある
まず基本中の基本なのですが、WordPressというより、HTMLの文書の行間には次の2種類存在しています。
- 改行幅
- 行間
改行幅
改行幅とは、段落と段落の間のスペースのこと。
HTMLでいうとpタグとpタグの間のスペースのことになります。
WordPressのビジュアルエディタでEnterキーを押して文書を改行すると、改行幅が発生することになりますね。
先ほどの例でいうと、ここに当たります↓
行間
行間とは、同じ段落内での文字と文字の間のスペースのことになります。
つまり、同じpタグ内で<br>で改行を挟んだ場合に、この行間のスペースが発生することになるのです。
先ほどの例でいうとここですね↓
＞＞詳しくは「WordPressの改行方法」を参照してみてください。
WordPressで改行幅・行間をCSSで調整する方法
ってことで、ここまでで基本をおさらいできたので、
- 改行幅
- 行間
をCSSで調整する方法をみていきましょう。
WordPressのstyle.cssというファイルを開き、セレクタがpになっている記述を探します。
管理画面から「テーマ編集」と進めば管理画面上でstyle.css編集できると思います。
この{}の中身をいじれば改行幅・行間が変更できるようになりますね。
改行幅：pタグのpaddingまたはmarginで調整
まず段落間のスペースの改行幅の調整からです。
改行幅は、
pタグのmarginもしくはpaddingを変更して調整していきます。
paddingとは要素内側の余白のことで、marginは要素外側の余白のことでしたね？
複数のpタグが存在していると状況だと、pタグ同士のpaddingとmarginが影響しあって、改行幅ができています↓
したがって、WordPressの改行幅を変更するためには、
セレクタpのpadding、marginというプロパティを変更すればいいわけです。
ぼくがWordPressで使用していたEmanonというテーマでは次のようなCSSになっていました。
|
1 2 3 |
.article-body p { margin-bottom: 40px; } |
つまり、pタグの下の余白（margin-bottom）が40pxも開いてしまっていたというわけです。
これは空きすぎやろ！
ってことで、この下の余白（margin-bottom）を半分の20pxに変更してみました。
|
1 2 3 |
.article-body p { margin-bottom: 20px; } |
行間：pタグのline-heightを変更
続いて行間ですね。こちらはpタグの
line-height
というプロパティをCSSで変更していきます。
line-heightというプロパティは
- normal : ブラウザの初期値
- px : ピクセル
- em : font-sizeの大きさに対して何倍か？（emを省略することもある）
などの値をとるようになっていますね。
Emanonというテーマでは
|
1 2 3 |
.article-body p { line-height: 2.0; } |
となっていました。これはつまり、
pタグのfont-sizeの2倍行間を開けているということになります。
行間が空きすぎ感があったので、ここを1.8に調整してみました。
|
1 |
.article-body p { line-height: 1.8; } |
行間と改行幅を調整してWordPressのデザインを整えていこう！
以上がWordPressの行間、改行幅を変更する方法でした。
- 改行幅
- 行間
の2つのプロパティをCSSで変更することで行間は変更できます。
CSSを操れば行間を詰めることもできますし、開けることもできます。
これらの変更を施し、スカスカだったぼくのブログ記事も次のような行間、改行幅に調整することができたのです。
うん。ちょっと詰まりましたね。
自分のお好みの行間に調整し、読みやすさを追求していきましょう。
「そ、それでも行間が詰まらない！！」
と焦っている方にはエンジニア専門のQAサイト「teratail」がおすすめです。
質問に答えてくれる方はプロのエンジニアの方ばかりなので、問題を解決できるかもしれません。
それでは！
Lin
【参考URL】
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている
