• メニュー
  • メニュー

【可読性アップ!】行間と文章間を詰める、空ける方法について

文字の行間が空きすぎだなーとか、文字が詰まり過ぎだなーと思ったことはありませんか?
読みやすいブログ、可読性の高い記事は、サイトの離脱率、滞在時間に影響があり、その読みやすさは行間、つまり行の高さ(line-height)が関係してきます。行の高さを変えて行間を空ける方法、詰める方法をご紹介します。

基本的に有料テーマなどは行間(行の高さ)や文章間隔がしっかり意識されて作られていますが、意図して変更したい場合があると思います。その際はこちらの方法を試してみてください。


読みやすいブログの文字の行間について

この文章、行間が詰まり過ぎて見にくいですよね!?

WordPressや一般的なホームページでも行間を空けたり、詰める方法は、line-heightというcssの記述を変更することで、変えることができます。見栄えは、サイトを訪れた時の第一印象に関わり、離脱する場合はホームページを開いて3秒で決まると言われています。とても重要なことですので、この部分はしっかり調整しましょう。

行間を空けて見やすくしてみましょう!

行間を大きく空けてみました。文字の行間を空けるにはCSSというファイルを編集します。CSSファイルはサイトのデザイン、装飾を指示するもので、ぱっとみると難しいと思いますがそこまで怖がることもありません(笑) ぜひトライしてみましょう!

cssセレクタはこちらを利用します。

line-height:

というCSSセレクタで行われます。

指定のしかたは、

  • 例1:line-height: 24px;
  • 例2:line-height: 1.5;
  • 例3:line-height: 150%;
  • 例4:line-height: 1.47em;

のように指定方法がいろいろあります。

いずれも、文字に対してどれくらいの空白が文字の上下にあるか?」を指定するものになり、表示結果は同じです。line-heightに単位を指定すると、親要素のline-heightが子要素・孫要素にも継承してしまうため、指定しないことが多いです。

例えば、子要素が親要素よりも文字が小さくなった場合、文字の割合で行間を決めてくれず、親要素の行間が広がってしまいとても読みにくくなってしまうからです。


line-heightの計算方法について

文字の大きさ(font-size)と行の高さ(line-height)は以下の関係になっています。

16pxの文字の上下に4pxの空白があり、この合計の数字24pxがline-heightになります。

line-heightの指定には説明した通り、pxで指定、比率で指定、%で指定、相対指定があります。

  • 例1:line-height: 24px;
  • 例2:line-height: 1.5;
  • 例3:line-height: 150%;
  • 例4:line-height: 1.47em;

例1~3までは計算方法はわかると思います。16px X 1.5(150%) = 24px となります。あるいは、24/16px = 1.5(150%) という計算になります。

相対指定のemの場合も考え方は一緒で、16pxがデフォルト1emとなっている場合、24pxの場合1.5emとなります。

上の見にくい文章は、

<div style="line-height:0.9">

と指定されていました。
では、

と指定してみましょう。
行間を見やすくした文章がこちらになります。う~ん、目に優しいですね^^ 1.7は、16px X 1.7=27.2pxとなります。

可読性は滞在時間にも影響されます。Googleや検索エンジンはすぐに帰ってしまうようなサイトは有益なサイトではない、と判断するため、できるだけサイトには長く滞在してほしいです。色がチカチカしていたり、改行が変、画像がないなど、文字の行間以外にもサイト滞在時間に影響する要素は多いです。
<div style="line-height:1.7">

ニュースサイトのその多くは文字の大きさは16px、line-heightは1.7と指定されていることが多いです。


文字の行間を空ける方法、詰める方法

まず自分のサイトの文字間隔がいくつなのか確認する必要があります。

行間を空ける方法

行間を空ける方法は、line-heightの数字を高くしてあげます。

line-height:1.7; のように。1.5以上を指定します。一般的に、文字のサイズが16pxの場合は、1.5~1.7が指定されると読みやすいと思います。

WordPressや一般的なホームページでも行間を空けたり、詰める方法は、line-heightというcssの記述を変更することで、変えることができます。見栄えは、サイトを訪れた時の第一印象に関わり、離脱する場合はホームページを開いて3秒で決まると言われています。とても重要なことですので、この部分はしっかり調整しましょう。

行間を詰める方法

行間を詰める方法は、line-heightの数字を低くしてあげます。

line-height:1.3; のように。1.4以下を指定します。

ここまでは、文の一つのまとまりの中での行の間隔のお話でした。次は、文のまとまりの間隔を空ける方法と、詰める方法を説明します。

人気テーマの設定方法

日本で人気の有料テーマでの設定方法を一部ですがご紹介します。

アフィンガー5(Wing)

Affinger5(アフィンガー5)は、PCでのデフォルトは以下の設定になっています。

font-size: 15px;
line-height: 27px;

スマホは、

font-size: 18px;
line-height: 30px;

端末の幅によって表示を切り替えているCSSコードになっています。それぞれの数字を変更することでサイズ変更可能です。

/*PC表示設定*/
@media print, screen and (min-width: 960px)
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, .post ul li, .post ol li, .post h5, .post h6, .post table tr td, table tr td {
    font-size: 15px;
    line-height: 27px;
}
/*タブレット表示設定*/
@media only screen and (min-width: 600px)
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, .post ul li, .post ol li, .post h5, .post h6 {
    font-size: 20px;
    line-height: 30px;
}
/*スマホ表示設定*/
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, #topnews .clearfix dd p, .post ul li, .post ol li, #comments #respond, #comments h4, .post h5, .post h6 {
    font-size: 18px;
    line-height: 30px;
}

権威8

権威の記事の文字は、remで相対的に指定されています。デフォルトは1.7remのようですので、この数字を変更すると文字の大きさを変更することができます。

.keni-main {
    letter-spacing: .025em;
    font-size: 1.7rem;
    line-height: 2.0em;
}

THE THOR (ザ・トール)

THE THOR(ザ・トール)も権威と同じように相対表示になっています。2つの端末タイプで表示を分岐しています。

以下のfont-size, line-heightの数字を変更してみてください。

/*PC表示設定*/
@media only screen and (min-width: 768px)
.content {
    font-size: 1.6rem;
}
/*768px以下の端末の表示設定(スマホなど)*/
.content {
    position: relative;
    font-size: 1.4rem;
    line-height: 1.75;

TCD テーマ

TCDテーマの場合は、これまでかなり多くのテーマを販売されており、テーマによって実装者が違うようで、CSSの書き方もテーマごとに違っています。以下にいくつかのサンプルを掲載します。

基本的にデフォルトを100%で、その他はpxで設定、line-heightは単位なしで設定していることが多いようです。

@media (max-width: 992px)
.p-entry__body {
    font-size: 14px;
}
media="screen and (max-width: 1230px)"
.post_content p {
    line-height: 2;
}
body {
  line-height: 1;
}

STORK19

ストークはbodyに基本フォントサイズが設定されています。記事本文もこの文字サイズになっています。line-heightは.entry-contet p で1.8に設定されています。

body {
    font-size:104%;
}
.entry-content p {
    line-height: 1.8;
}

ちなみに見出しについては以下のように設定されています。125%を変更してあげると文字サイズを変更することができます。

.entry-content h2:not(.is-style-stylenone), .homeadd_wrap h2 {
    font-size: 125%;
}

文の間隔を空ける方法と詰める方法

ブログの読みやすさには、行の文字の間隔も大事ですが、まとまった文章ごとの間隔も非常に大事です。

アメブロやメルマガなどですごく空白が多い記事を読んだことありませんか?

スマホでスワイプするのでかなり空白を使用することも多いですが、あまりに空きすぎても読みずらかったりします。また、ブログのジャンルによって空いてよい間隔というものもあります。

さて、具体的な話ですが、ワードプレスのテーマの仕様によりますが、ビジュアルエディタで記事を書くときに、Enterを押すと改行されます。すると別の文章のまとまりになり、<p>内容</p>タグというもので囲まれます。(p=paragraph(段落))

以下の文章のような場合に、文のまとまりごとの間隔をちょっとだけ開けたいな~って思うことがあると思います。

(上下に5px)ワードプレスで文字をもっと空けたい場合どうするか?

(上下に20px)それは、<p>タグのマージン(margin)を変更する必要があります。正しい行間も大事ですが、文章のまとまりが、あまりに離れていたりすると、流れるように読むことができなくなってしまいます。

(上下に40px)それとは逆に、文章のまとまりが詰まり過ぎていると、息継ぎすることができず、また話がどこで区切られているか分かりずらく、内容が入ってこなくなってしまいます。

(上下に60px)読み手のことを考えて、文字行間、文章間隔、この2つはちゃんと設定してあげましょう。

使われているテーマによって、段落の上下のマージン(余白)の設定が違うため、改行するとどれくらい間が空くかにも気をつかってみてください。

<body></body>に設定されている<p>に以下を設定することで、文章ごと、つまり<p>間隔を変更できます。

CSSのmarginでpタグに対する余白を設けます。以下の場合は、上下に30px、約2文字分の余白が確保されます。

<p style="margin:30px 0;">

段落はpタグになるので、文字サイズの変更で紹介したCSSコードに記載されることが多いです。

.entry-content p {
    margin: 0 0 1.6em; /* 段落下部のマージンが1.6emになります*/
}

PCの場合はスクロールせずに1画面で読める場合でも、スマートフォンでは、スクロールしないと見れないことが多いです。

スマホだとさらさら―っと早いスピードでスクロールすることが簡単にできるので、縦に間延びした記事でも比較的読みやすいとされています。

読み手の息継ぎになりますので、スマホでライトに気軽にさらさらっと読まれる記事なのか、PCでじっくり真剣に読まれる記事なのかによっても行間と言うものはしっかり検討されるべきです。文章間隔を間違えると息つぎなしで50mを泳ぐようなもので、非常に読みづらく苦しい記事になってしまいます。


参考:世の中の文字間隔・行間隔・文章間隔トレンドについて

世の中のサイトのトレンドを掴んでおくことはとても大事です。それぞれサイトの性格が違うのでマネする必要はありませんが、ぜひ世の大手サイトの流れは把握しておきましょう。

Googleが使っている文字間隔は?!

Googleのサイトではどのようなフォントサイズ(font-size)、行高さ(line-height)が使われているのでしょうか。

サイトリンク → Google webmaster tool

以下はGoogleのWeb master toolの記事の文章です。

cssのコードはこちらです。

.post .post-content {
  color: #212121;
  color: rgba(0,0,0,.87);
    font-size: 17px;
    margin: 25px 0 36px 0;
    line-height: 32px;
    word-wrap: break-word;
}

Googleの場合、line-heightをpxで指定していますね。フォントサイズが17pxに対してline-heightの行高さが32pxとなっています。結構話している印象です。別の書き方だとline-height:1.88となります。(32/17=1.8823529)

文章間隔は、上に25px、下に36pxの距離が取られています。


Appleが使っている文字間隔は?!

最近のAppleのホームページはカタログのようなサイト構造になっていて、マウスロールをコロコロ動かすとアクションを起こす仕組みになっています。

サイトリンク → Apple

製品の性格上、文字よりビジュアルが重要視されていますので、少し特殊です。

font-size:24px, line-height: 1.41667 という形になっています。


Yahooが使っている文字間隔は?!

Yahoo!JAPANのニュース記事の設定は、font-size: 1.6rem; line-height: 1.8em; となっています。サイトが大規模で非常にたくさんのフォントサイズが使われていますので、少し参考にし辛いサイトでもあります。

サイトリンク → Yahoo!JAPAN


日経新聞(デジタル)が使っている文字間隔は!?

ニュースサイト日経新聞のデジタル版はこのようになっています。最近のトレンドfont-sizes16pxの文字にline-heightが1.7になっています。

サイトリンク → 日経新聞

.m-streamer_medium.cmn-announce_personnel,
.m-streamer_medium.cmn-article_text {
    font-size: 16px!important;
    line-height: 1.7;
}

まとめ:

行の高さ(line-height)については、数字が小さく詰まりすぎているよりも、数字が大きく空いているほうが読みやすいと感じます。つまり過ぎていると1文字1文字が読みづらくなるからです。

ただし、行の幅が空きすぎていると文字は1つ1つ認識しやすいですが、テンポよく読めなくなってしまいます。

文字(font-size)は16~17px、行の高さ(line-height)は1.7(170%、24px)くらいがよろしいかと思います。これが最近の一般的なサイズ感になっています。流し読みされずにじっくり読まれる記事に特におすすめです。

初心者でも分かるようにCSSの編集方法を解説していますのでこちらの記事をお読みください。

   

有益情報も流しているのでツイッターもぜひフォローお願いします。


                   
参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です