WordPressのサイトで記事を読んでいると、行の先頭に長音「ー」や小さい「ャ」「ッ」がぽつんと来ていることがあります。「カスタマイズ」が「カスタマイ／ズ」ならまだしも、「エディタ／ーで」と長音から行が始まると、日本語の読者には小さな引っかかりになります。
これは記事の書き方の問題ではなく、CSSのline-break（行を分けるときのルール）の問題です。この記事では、line-breakの値ごとの違いを当社でブラウザに表示して比べた結果と、WordPressでの設定方法をまとめます。
結論から言うと、日本語のサイトでは本文に「line-break: strict」を1行入れておくのがおすすめです。長音や小さい仮名が行頭に来なくなります。見出しの改行まで整えたい場合は、以前の記事で紹介したtext-wrapやword-break: auto-phraseと組み合わせます。
長音や小さい仮名が行頭に来る原因は？
日本語には、句読点や閉じかっこ、長音、小さい仮名などを行の先頭に置かない「行頭禁則」という組版のルールがあります。ブラウザもこのルールを持っていますが、どこまで厳しく守るかはCSSのline-breakで決まります。
line-breakを何も指定しないと、初期値の「auto」になります。autoでは句読点や閉じかっこは行頭に来ませんが、長音「ー」や小さい「ァ」「ッ」「ャ」は行頭に来てもよいという扱いになります。多くのテーマは英語圏で作られているため、この指定を入れていません。WordPress 7.2に同梱予定の新しいデフォルトテーマIpsumも、開発版では指定がなく、実際に長音が行頭に来ていました（Ipsumを日本語で試した記事）。
line-breakの値を比べてみた
同じ文章を、line-breakの値だけを変えて表示しました。Chrome 154（Mac）で、文字の大きさ20px、幅は11文字ぶんです。行頭に来てしまった文字を赤で囲んでいます。
| 値 | 長音・小さい仮名 | 句読点・閉じかっこ | 向いている場面 |
|---|---|---|---|
| auto（初期値） | 行頭に来る | 行頭に来ない | — |
| normal | 行頭に来る | 行頭に来ない | 今回の検証ではautoと同じ結果 |
| loose | 行頭に来る | 行頭に来ない | 今回の検証ではautoと同じ結果。狭い欄で詰めて表示したいとき |
| strict | 行頭に来ない | 行頭に来ない | 日本語の本文・見出し |
| anywhere | 行頭に来る | 行頭に来ることがある | URLや長い英数字を必ず折り返したい欄だけ |
幅を9〜16文字ぶんまで1文字ずつ変えて、行の先頭に来る文字を自動で調べても、autoとnormalとlooseは同じ結果でした。strictだけが、長音や小さい仮名を前の行に残すか、前の文字と一緒に次の行へ送ります。anywhereは禁則をほぼ無視して、幅によっては「、」「。」まで行頭に来ました。
WordPressでline-breakを設定する方法
入れるのは次の1行です。本文だけでなく見出しやボタンの文字にも効くよう、bodyに指定します。
|
1 2 3 |
body { line-break: strict; } |
WordPressで追加する場所は、使っているテーマによって違います。
- ブロックテーマ（Twenty Twenty-Five、Ipsumなど）：サイトエディターの「スタイル」から「追加CSS」に書く
- クラシックテーマ：「外観」→「カスタマイズ」→「追加CSS」に書く
- 子テーマを使っている場合：子テーマのstyle.cssに書く（テーマを更新しても消えない）
記事54のIpsumでも、この1行を足すだけでスマホのタイトルの「デフ／ォルト」が「デ／フォルト」になり、本文の「テ／ーマ」も直りました。
ここまでのまとめ
- 長音や小さい仮名が行頭に来るのは、line-breakが初期値のautoのままだから
- 日本語サイトはbodyに「line-break: strict」を入れる
- anywhereは句読点まで行頭に来ることがあるので、本文には使わない
text-wrap・auto-phraseとどう組み合わせる？
以前の記事「CSSだけで『理想の改行』は作れる？text-wrap・auto-phraseをWordPressで実務検証してみた」では、見出しの行の長さをそろえるtext-wrap: balanceや、文節で改行するword-break: auto-phraseを紹介しました。line-breakはそれらと役割が違い、「行の先頭に来てはいけない文字」を決めるものです。組み合わせた結果が次の画像です。
- word-break: auto-phraseは文節の切れ目で改行するので、この文章では長音や小さい仮名が行頭に来ることはありませんでした。strictを足しても表示は同じです
- strict単独では、最後の行が「う。」だけになりました。text-wrap: prettyを足すと、最後の行が「しょう。」になり、1〜2文字だけの行ができにくくなりました
auto-phraseは文節で区切るぶん行の右側が大きく空くので、見出しや短い文に向いています。当社のおすすめは次の組み合わせです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 全体：長音や小さい仮名を行頭に置かない */ body { line-break: strict; } /* 本文：最後の行が極端に短くなるのを防ぐ */ .entry-content p { text-wrap: pretty; } /* 見出し：文節で改行し、行の長さをそろえる */ h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; } |
.entry-contentの部分は、テーマによって本文を囲むクラス名が違います（ブロックテーマなら.wp-block-post-contentなど）。auto-phraseはhtmlタグにlang=”ja”が付いているときだけ効き、ブラウザによっては対応していません。対応していないブラウザでは通常の改行になるだけなので、表示が崩れる心配はありません。
技術者向け：確認するときの注意点
今回の結果はChromeでの実測です。line-breakの細かい扱いはブラウザや言語の指定によって違うことがあるので、SafariやFirefoxを使う読者が多いサイトでは、実機でも確認してください。
行頭の禁則は、幅が1文字変わるだけで出たり消えたりします。1つの画面幅で確かめて安心せず、スマホの縦・横、タブレット、PCと、いくつかの幅で見るのが確実です。当社の検証でも、幅を1文字ずつ変えていくと、ある幅では長音、別の幅では小さい「ャ」が行頭に来ていました。
また、htmlタグのlang属性がjaになっているかも確認してください。WordPressは管理画面の「設定」→「一般」のサイトの言語に合わせてlang属性を出力するので、サイトの言語が英語のままの場合、日本語向けの改行処理が効かないことがあります。
よくある質問
Q. line-break: strictにすると困ることはありますか？
行頭に来られない文字を前の行に残すか、前の文字と一緒に次の行へ送るため、行の長さが少し不ぞろいになり、最後の行が短くなることがあります。本文にtext-wrap: prettyを足すと目立ちにくくなります。
Q. 句読点が行頭に来るのも防げますか？
句読点と閉じかっこは、初期値のautoでも行頭に来ません。ただしline-break: anywhereを指定している場所では行頭に来ることがあるので、テーマのCSSにanywhereが入っていないか確認してください。
Q. プラグインで設定できますか？
CSSを1行足すだけなので、プラグインは不要です。テーマの追加CSSか、子テーマのstyle.cssに書くのが手軽です。
サイトの読みやすさを整えたい方へ
日本語の読みやすさは、行頭の禁則のほか、文字の大きさ、行間、1行の長さ、和文と欧文の書体の組み合わせなど、小さな設定の積み重ねで決まります。当社はWordPress専門のエンジニアとして、テーマのCSS調整や子テーマでのカスタマイズを行っています。「スマホで読むと何となく読みにくい」といったご相談も、お気軽にどうぞ。
更新履歴
- 2026年9月29日：作成（Chrome 154で line-break の値と組み合わせを比較）
この記事を書いた人
矢部 敦合同会社Edel Hearts 代表
WordPress専門の開発会社を経営。プラグイン開発・カスタマイズ・保守を専門とし、18時間におよぶUdemyのWordPress講座を開講。出典付きで回答するAIチャットボット「Edel AI Hybrid Chat」開発者。著書『WordPress はじめての最小プラグイン』（Kindle）。本ブログの記事は、実際の開発・運用で得た一次情報をもとに執筆しています。会社情報はこちら
