詰めるも開けるもCSSで自由自在！WordPressで行間を調整する方法

WordPressの行間を調整したいんだけど！

どうも、Linです。尿道、躍動してます。

WordPressでサイトを運営しているとたまに、

行間を調整したいな・・・・

という瞬間があることでしょう。

ぼく自身、Emanonというテーマで運営していたWordPressサイトで、

「あれ、行間空きすぎてないか？」

と思うことがあったのです。

次のようなHTMLコードに対して、

<p>ちょっと行間が広すぎるような気がしています。<br>
いや、ぼくの気のせいかな？<br>
うーん、どうなんだろうね？</p>
<p>いや、そんなことないはず。調整してもいいでしょ。</p>
<p>調整しよう。</p>

次のような表示↓

文字と文字の間の行間が空きすぎていて、ブログの中身の無さが余計に際立っているように感じてしまったのです笑

そこで今日は、ぼくと同じように行間がスカスカに開いたり、ぎゅうぎゅうに詰まったりしてしまっている方のために、

WordPressの行間を調整する方法

をまとめてみました。

WordPressの行間には2種類ある

まず基本中の基本なのですが、WordPressというより、HTMLの文書の行間には次の2種類存在しています。

1. 改行幅
2. 行間

改行幅

改行幅とは、段落と段落の間のスペースのこと。

HTMLでいうとpタグとpタグの間のスペースのことになります。

WordPressのビジュアルエディタでEnterキーを押して文書を改行すると、改行幅が発生することになりますね。

先ほどの例でいうと、ここに当たります↓

行間

行間とは、同じ段落内での文字と文字の間のスペースのことになります。

つまり、同じpタグ内で<br>で改行を挟んだ場合に、この行間のスペースが発生することになるのです。

先ほどの例でいうとここですね↓

＞＞詳しくは「WordPressの改行方法」を参照してみてください。

FREE SWORDER

WordPress使いなら覚えておきたい！2種類の改行と使い分け方法

https://freesworder.net/wordpress-new-line

WordPressの改行方法には2種類あるって本当？どうも、Linです。フラップ、マスターしました。 WordPress で記事を書いていると必ずとるアクションがあります。それは、改行するということです。改行なしで書くブロガーの方もいると思いますが、読みやすさを優先して改行でスペースを空けていく手法が一般的となっています。そんなWordPressブロガーにとって大事となってくる改行方法には、なんと、2種類存在しているのです。 段落分け改行（Enter） 段落内改行（Shift＋Enter）今日はこの 2種類の改行方法を改めてわかりやすく...

WordPressで改行幅・行間をCSSで調整する方法

ってことで、ここまでで基本をおさらいできたので、

1. 改行幅
2. 行間

を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になっていました。

.article-body p {
	margin-bottom: 40px;
}

つまり、pタグの下の余白（margin-bottom）が40pxも開いてしまっていたというわけです。

これは空きすぎやろ！

ってことで、この下の余白（margin-bottom）を半分の20pxに変更してみました。

.article-body p {
 margin-bottom: 20px; 
}

行間：pタグのline-heightを変更

続いて行間ですね。こちらはpタグの

line-height

というプロパティをCSSで変更していきます。

line-heightというプロパティは

• normal : ブラウザの初期値
• px : ピクセル
• em : font-sizeの大きさに対して何倍か？（emを省略することもある）

などの値をとるようになっていますね。

Emanonというテーマでは

.article-body p {
	line-height: 2.0;
}

となっていました。これはつまり、

pタグのfont-sizeの2倍行間を開けているということになります。

行間が空きすぎ感があったので、ここを1.8に調整してみました。

.article-body p { line-height: 1.8; }

行間と改行幅を調整してWordPressのデザインを整えていこう！

以上がWordPressの行間、改行幅を変更する方法でした。

1. 改行幅
2. 行間

の2つのプロパティをCSSで変更することで行間は変更できます。

CSSを操れば行間を詰めることもできますし、開けることもできます。

これらの変更を施し、スカスカだったぼくのブログ記事も次のような行間、改行幅に調整することができたのです。

うん。ちょっと詰まりましたね。

自分のお好みの行間に調整し、読みやすさを追求していきましょう。

それでは！

Lin

【参考URL】

www.htmq.com

 

5 Shares

20 Users

23 Pockets

line-height－スタイルシートリファレンス

http://www.htmq.com/style/line-height.shtml

HTMLタグ・スタイルシート・特殊文字等の早見表

www.webword.jp

 

3 Shares

8 Users

21 Pockets

em単位 - 値の単位と記述方法 - スタイルシート入門

http://www.webword.jp/cssguide/color/index5.html

em単位

やっとこブログ

 

2 Users

4 Pockets

WordPressで行間と改行幅をカスタマイズする方法（テーマ：Xeory）

http://yattokoo.com/wordpress-space-line

WordPressのテーマ「Xeory」で行間と改行幅をカスタマイズする方法を、初心者でも分かりやすく簡単に説明しています。

飯橋凛（いいはし りん）

おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。

ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。

質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。