PR ブログ運営

【CSS】WordPressの改行幅をmarginで調整する方法

【CSS】WordPressの改行幅をmarginで調整する方法
ひろ
ひろ

今回はCSSを使って、ブログの改行幅を自由に調整する方法についてまとめました。

ブロガーにとってデザインは永遠の課題。
WordPressは特に自由度が高い分、文字の行間や改行の幅などなど、追及していくとキリがないと思います。

中でも文章の行間や改行幅は、読みやすさに大きな影響を与えます。Webサイトやブログを作るときはCSSを使って必ず指定しておきましょう。

最近は有料テーマを使っているブロガーさんも多いですが、テーマにCSSをちょっと追加するだけで、文章の読みやすさは簡単に調整することができます。

読みやすさにはこだわりたいですよね。
自分の納得感もだけど、どうすれ読みやすいブログになるかは、いつも追及したいところです。

悩み中の人
悩み中の人

ブログのデザインとかも大事だけど、肝心の文章が読みやすいかどうかが1番重要だよね。

ひろ
ひろ

自分が書きやすい「文章の型」を決めてしまうといいですね。だからこそ、設定にはめちゃくちゃこだわるべきです。

CSSを使って、まず文章の型を決めましょう。
具体的なCSSの設定方法と、改行のおすすめの値について解説します。

行間と改行幅をCSSで設定しておこう

行間と改行幅とは?

「行間」とは、文字のとおり「行と行の間」のこと。行と行の高さのこと、でもありますね。文章がキツキツに見えるか、スカスカに見えるかが決まります。

「改行幅」とは、「文章を改行したときの幅」のこと。ここが詰まりすぎていると読むのが疲れてしまいます。少し余裕があるくらいがいいと思います。

この「行間」と「改行幅」は、ワードプレスにCSSを追加することで調整できます。その方法は下記の通りです。

行間を決めるソースコード

まずは行間からいきましょう。
行間とはつまり、行の高さのことですね。
line-height で設定します。

このコードをCSSに追加すればOKです。
line-heightは1.5〜2.0くらいがベストですね。

.entry-content p {
line-height: 1.8;
}

このブログでは1.8に設定しています。
1.5より小さいと窮屈に見えるし、逆に2.0以上だと、文章がスカスカに見えてしまいます。実際に例を見てみましょう。

①line-height: 1.0 の場合。
↓行の高さが狭くてキツキツですね。

line-height: 2.5 の場合。
↓文章がスカスカです。

これが行間(行高)の設定です。
読みにくいブログは、わりと文章がキツキツになっていることが多いですね。少し余裕があるくらいが読みやすいと思います。

改行幅を決めるソースコード

次に改行の幅を決めましょう。
改行幅はmargin で設定します。

.entry-content > p {
margin: 0 0 1.5em;
}

改行幅は好みが分かれます。
有料テーマを使っている人とかだと、わりと最初は狭く設定されていることが多いような印象ですね。

自分の好みに合わせて変えて下さい。
僕は少し広めが好きなので、1.5前後がいいかなと思います。

改行幅を変える時の注意点

テーマデザインへの影響を抑える

CSSは便利な分、色んな所に影響します。
最近は有料テーマを使っている人も多いですが、有料テーマ独自のボックスや見出しにも、CSSが効いてしまうんですよ。

ボックス内や見出しにも改行幅が生まれてしまい、見た目が不格好になってしまいます。せっかくのデザインが台無しです。

なので、改行幅のコードにはちょっとした仕掛けがあります。行間のコードとの違いに気づきましたか?

.entry-content > p {
margin: 0 0 1.5em;
}

この>を使うことで、本文コンテンツにのみ、改行幅が適用されるようになります。これでボックスの中などの段落には影響しません。

ここは超重要です。
僕もここには長らく頭を悩ませていましたが、やっと最も簡潔な解決策が分かりました。これでバッチリです。

まずは自分が読みやすいブログに

行間や改行幅は好みが分かれます。
なので、まずは自分が読みやすいと思う設定にするのがいいと思います。

自分で書いた記事の構成が、自分で読みにくいなと感じるなら、そもそも楽しくブログを続けられないですからね。

自分が好きなブロガーさんのブログを見て、行間や改行幅をそれに近づけてみると良いと思います。自分が読みやすいと思っているブログが、自分に合っている改行幅です。

行間と改行幅で全体の印象が決まります。
ここがうやむやだと、結局後で大幅なリライトをすることになるので、バシッと「文章の型」を先に決めておきましょう!

  • この記事を書いた人
  • 最新記事

HIRO(ひろ)

2016年ブログ開設、ブログ歴8年目。ブログ運営のノウハウを中心に多彩な情報を発信しています。ブラック企業で働きながらコツコツと自分のブログを育てたら人生変わりました。当ブログが少しでもヒントになれば幸いです。

-ブログ運営