ブログの本文を読みやすくする CSS：薄い字・広すぎる行間・段落のあいだを見直し、コードの _ が消える件も直す

プラグイン関連

広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

このブログの記事を読み返したとき、「1 文ごとの段落で、これくらいの文でもう読みにくい」と感じました。

このブログは、短い文で書き、1 文ごとに段落（<p>）を分けています。

書き方は変えずに、本文の見た目を CSS で見直しました。

読みにくかった原因

テーマの CSS を調べると、原因は 3 つありました。

テーマの本文の CSS（前）

/* テーマの設定が head に出すもの（PC） */
.post_content { font-size: 18px; color: #666666; }

/* style.css */
.post_content p {
	line-height: 2.4;
	margin: 0 0 2em;
	padding-left: 1em;
}

/* responsive.css（スマホの幅） */
.post_content p {
	line-height: 2;
}

書き方	役目	読みにくかった理由
`color: #666666`	本文の字の色	薄い灰色で、白い背景との差が小さい
`line-height: 2.4`	1 行の高さ（字の大きさの 2.4 倍）	18px の字で 1 行が 43.2px。行と行が離れすぎる
`margin: 0 0 2em`	段落の下のあき（字の大きさの 2 倍）	1 文ごとに段落なので、文と文のあいだが毎回 1 行分あく
responsive.css の `line-height: 2`	スマホの幅での 1 行の高さ	スマホでも行と行が離れている

字の色と大きさは、テーマの設定画面の値から、ページの head に出ています。

スマホの幅では、字の大きさは 16px です。

フォント（Arial → ヒラギノ → メイリオの順）は、ここは変えませんでした。

直した CSS

テーマの style.css の最後に、次の 5 行を足しました。

style.css（最後に足したもの）

body .post_content { color: #333; }
body .post_content > p { line-height: 1.85; margin: 0 0 0.9em; }
body .post_content > h2, body .post_content > h3 { margin-top: 2em; }
body .post_content > h2, body .post_content > h3 { margin-bottom: 0.8em; }
body .post_content code { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 0.95em; }

書き方	役目
`body .post_content`	前に `body` を付けて、テーマの設定（head）と responsive.css の指定より強くする
`color: #333`	字の色を濃い灰色にする
`> p`	本文のすぐ下の段落だけに効かせる。引用（`blockquote`）の中の段落は変えない
`line-height: 1.85`	1 行の高さを、字の大きさの 1.85 倍にする。単位を付けない書き方
`margin: 0 0 0.9em`	段落の下のあきを、字の大きさの 0.9 倍にする
`margin-top: 2em`	見出し（h2・h3）の上を広くあけて、話の区切りを分かりやすくする
`margin-bottom: 0.8em`	見出しのすぐ下も少しあけて、本文とくっつかないようにする
`font-family: Consolas, …, monospace`	本文の中のコードのフォント（下の「コードの _ が見えなかった件」）
`font-size: 0.95em`	コードの字を、まわりの字より少しだけ小さくする

段落の左のあき（padding-left: 1em）は、そのままにしました。

line-height に単位を付けない理由

line-height は、1.85 のように単位なしで書くと、字の大きさに掛ける倍率になります。

PC（18px）でもスマホ（16px）でも、同じ倍率で効きます。

そのため、responsive.css のスマホ用の値も、この 1 行でまとめて上書きできました。

前と後の値

ブラウザーの開発者ツールで、getComputedStyle() を使って、実際に効いている値を読みました。

開発者ツールのコンソールで読んだもの

const p = document.querySelector('.post_content > p');
const h = document.querySelector('.post_content > h2');
const ps = getComputedStyle(p);
const hs = getComputedStyle(h);
[ps.fontSize, ps.lineHeight, ps.marginBottom, ps.color, hs.marginBottom];

項目	PC（18px）前	PC（18px）後	スマホ（幅 500px・16px）前	スマホ（幅 500px・16px）後
1 行の高さ	43.2px	33.3px	32px	29.6px
段落の下のあき	36px	16.2px	32px	14.4px
見出しの下のあき	10px	20.16px	−	約 18px
字の色	rgb(102, 102, 102)	rgb(51, 51, 51)	rgb(102, 102, 102)	rgb(51, 51, 51)

PC では、段落の下のあきが 36px から 16.2px になり、半分より小さくなりました。

1 文ごとに段落でも、文と文が離れすぎず、続けて読めるようになりました。

スマホの幅の見出しの下は、直す前の値を記録していなかったので「−」にしています。

字の色のコントラスト

字の色と背景の色の差は、WCAG（ウェブのアクセシビリティの基準）の「コントラスト比」で数で表せます。

WCAG の相対輝度の式で、白い背景に対する比を計算しました。

字の色	相対輝度	白い背景とのコントラスト比	AA（4.5:1 以上）	AAA（7:1 以上）
#666666（前）	0.1329	約 5.74:1	満たす	満たさない
#333333（後）	0.0331	約 12.63:1	満たす	満たす

前の #666 も、AA の基準（ふつうの大きさの字で 4.5:1）は満たしていました。

ただ、長い文章を読むと薄く感じたので、濃い #333 にしました。

#333 は、AAA の基準（7:1）も満たします。

コードの _ が見えなかった件

見直しの途中で、もう 1 つ気づいたことがあります。

本文の中のコード（<code>）で、wp_insert_post() の「_」が見えず、「wp insert post()」のように見えていました。

Windows の Chrome で見たときです。

本文の <code> は、font-family: monospace だけで、フォントの名前を書いていませんでした。

この場合、どの等幅のフォントを使うかは、ブラウザーと OS が決めます。

どのフォントが選ばれていたかまでは、調べていません。

本文のコードのフォント（前と後）

/* 前：等幅のフォントの名前を書いていない */
.post_content code { font-family: monospace; }

/* 後：先にフォントの名前を書き、最後に monospace */
body .post_content code { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; }

書き方	役目
`Consolas`	Windows に入っている等幅のフォント
`Menlo`・`Monaco`	Mac に入っている等幅のフォント
`"Courier New"`	多くの OS に入っている等幅のフォント。名前にスペースがあるので引用符で囲む
`monospace`	どれもないときに、ブラウザーが選ぶ等幅のフォント。最後に書く

Consolas などを先に書いたら、「_」が見えるようになりました。

前の CSS に戻しても「_」は見えなかったので、今回の行間の直しが原因ではありません。

コードの枠（Enlighter のブロック）は、枠のほうで指定したフォント（Source Code Pro など）を使うので、この直しの影響はありません。

確かめ方

次の順で確かめました。

順	やったこと	見たこと
1	記事のページに、試しの `<style>` を足した（開発者ツールで、その場だけ）	前と後をスクリーンショットで比べた
2	作業環境のテーマの style.css を直した	PC の幅とスマホの幅で、`getComputedStyle()` の値と見た目
3	テーマの git で本番に入れた	本番でも、同じ値になっていること

1 で足した試しの style（一部）

<style>
    body .post_content { color: #333; }
    body .post_content > p { line-height: 1.85; margin: 0 0 0.9em; }
</style>

確かめるときは、Ctrl+Shift+R（キャッシュを使わない読み込み直し）で読み込みました。

Webデザイナー募集中一緒にお仕事しませんか？

見に来る人のブラウザーに古い CSS を残さない

このサイトの style.css は、ブラウザーに 30 日のあいだ保存される設定です（Cache-Control: max-age=2592000）。

ファイルを直しても、URL が同じなら、前に来た人のブラウザーは古い CSS を使い続けます。

今回のテーマでは、header.php で style.css を読むときに、?date=日時 を付けていました。

この日時は、ファイルを直した日時ではなく、管理画面のダッシュボードにある自作の「更新」ボタンを押した日時です。

そこで、本番に入れたあとにボタンを押して URL を変え、ページのキャッシュのプラグインのキャッシュも消しました。

キャッシュを消したあと、ログインしないでページを取得して、CSS の URL の日時が新しくなっていることを確かめました。

気をつけること

テーマの CSS を直接直すと、テーマを更新したときに消えることがあります。子テーマや「追加 CSS」に書く方法もあります
> p にしたので、引用・表・リストの中の段落は、前のままです
CSS の URL の日時を変えても、ページのキャッシュのプラグインが古い HTML を返しているあいだは、古い URL のままです。日時を変えたら、ページのキャッシュも消します
行の高さや段落のあきに、正しい 1 つの値はありません。字の大きさと、文の書き方（1 文ごとに段落か、長い段落か）に合わせて決めます
コントラスト比は白い背景で計算しました。背景に色がある所では、比が変わります

まとめ

1 文ごとに段落を分ける書き方では、段落の下のあきが大きいと、文と文が離れて読みにくくなる
行の高さを 2.4 から 1.85 に、段落の下を 2em から 0.9em に詰め、見出しの上と下をあけた
字の色を #666 から #333 にして、白い背景とのコントラスト比を約 5.74:1 から約 12.63:1 にした
テーマの設定や responsive.css より強くするため、body を付けた。引用の中は変えないよう > p にした
本文のコードは、monospace だけにせず、Consolas などのフォントの名前を先に書いたら「_」が見えるようになった

参考

プラグイン関連

プラグインを止めたらサイトが 500 になった：テーマがプラグインの定数や関数を…前の記事

WordPress functions.php