Chatgptに聞いてみた↓
ここでは「雑記ブログ20年の専門家として、初心者にもわかるように、WordPress自作テーマで投稿文のページを読みやすくするための基本原則」を、類推（たとえ話）と段階的な論理を使って解説します。
🧠【前提】「読みやすさ」は“部屋の空気”と同じ
ブログの本文は、読者が「ずっと居たい」と思う空間でなければなりません。
文字がギュウギュウに詰まっていたり、窮屈な印象を与えると、それは空気の悪い部屋のようなもの。どれだけ中身がよくても、長居したいとは思えません。
✅【目的】なぜ「文字のつまり」を解消するのか？
- 読者の離脱を防ぐため（見た目で「読みにくい」と判断されがち）
- 伝わる力を上げるため（情報が脳に届きやすくなる）
- 印象を良くするため（センスよく見せるには、余白が重要）
🛠【実践ステップ】自作テーマで「読みやすい投稿ページ」を作る方法
ステップ①：行間を広げる（line-height）
🔰類推：文字の間に「換気スペース」を入れる
人間が快適に呼吸できるには空気が必要。それと同じで、文字にも「間」が必要です。
/* 投稿本文のCSS例 */
.post-content {
line-height: 1.8; /* または 1.6〜2.0くらいが目安 */
}
ステップ②：文字サイズを適切にする（font-size）
🔰類推：小さすぎる文字は“豆粒の手紙”
目安は16px〜18px。スマホで読まれることを意識するなら18pxがおすすめ。
.post-content {
font-size: 18px;
}
ステップ③：行の幅（最大幅）を制限する（max-width）
🔰類推：1行が長すぎると“永遠に終わらない列車”
1行あたりの文字数は35〜70文字が理想。画面全体にダラーッと広がらないようにします。
.post-content {
max-width: 700px;
margin: 0 auto;
}
ステップ④：段落ごとの余白をつける（margin-bottom）
🔰類推：段落のあいだには“息継ぎ”が必要
段落と段落の間に十分な空白があると、脳が「一区切りついた」と判断できます。
.post-content p {
margin-bottom: 1.2em;
}
🎨【＋αのヒント】もっと読みやすくするための工夫
- フォントは読みやすいものを使う（例：游ゴシック、Noto Sans JPなど）
- 文字色は#333など真っ黒よりやや優しいグレーにする
- 背景色と文字色のコントラストを十分に保つ（白背景に濃グレーなど）
- 余白（padding）も大事：上下左右に“白いスペース”を設ける
🧩【まとめ】初心者が押さえるべき4つの核原則
| 原則 | 目的 | CSSの例 |
|---|---|---|
| ① 行間（line-height） | 圧迫感を減らす | line-height: 1.8; |
| ② 文字サイズ（font-size） | 視認性向上 | font-size: 18px; |
| ③ 行の長さ（max-width） | 読みやすさ維持 | max-width: 700px; |
| ④ 段落間の余白（margin-bottom） | 情報の区切りを明確に | p { margin-bottom: 1.2em; } |
🪄補足：どこにCSSを書く？
WordPressの自作テーマの場合：
style.cssに書く（テーマのルートにある）- または
single.phpなどの投稿用テンプレート内でclass="post-content"に指定して、スタイルを適用する
📩次に何をすればいい？
style.cssに上記のスタイルを追加してみましょう- 実際の投稿画面で見た目をチェック
- スマホとPCで「窮屈さがなく、読みやすいか？」を確認する
必要であれば、あなたの自作テーマに合わせたコード調整もできます。お気軽にコードを見せてください。次は「段落ごとの装飾」や「見出しの使い方」について解説するのもおすすめです。