【WordPress】Twenty Twenty-FiveでiOSの右側がスカスカになるバグ？を解決！「もうサイト消したい」と思う前に読んでほしい修正CSS
WordPressの新しいデフォルトテーマ「Twenty Twenty-Five」を使い始めて、絶望していませんか？
「iPhoneで見ると、なぜか文章の右側に3〜5文字分くらいの謎の隙間ができる」
「デスクトップでも、画面を狭くするとタイトルや文章が意図しないところで改行されてガタガタ…」
いろいろなCSSを試しても、今度はデスクトップのレイアウトが崩壊して左に寄ってしまったり。「もう、こんなに苦労するならサイトごと消してしまったほうがマシだ！」と短気になりそうなほどのストレスを感じているあなたへ。
安心してください。そのバグのような挙動、あなたの設定ミスではなく、最新技術と日本語の「相性の悪さ」が原因です。
1. 衝撃の事実：古いAndroidでは「完璧」だった理由
この問題の最も不思議な点は、「かなり古いAndroidスマホで見ると、実は完璧に表示されている」という点です。最新のiPhoneやMac/PCでだけ、表示が崩れて見えます。
なぜ、古い端末の方が綺麗なのか？
それは、古い端末のブラウザが「余計な気を利かせる最新の命令（CSS）」を知らなかったからです。
2. 犯人は最新機能「text-wrap: pretty / balance」
最新のWordPressテーマには、欧米で生まれた最新の改行アルゴリズムが組み込まれています。
- text-wrap: pretty（段落用）：最後の一行が寂しくならないよう、前の行を短く調整する。
- text-wrap: balance（タイトル用）：上下の行の長さを同じくらいにして美しく見せる。
これらは英語では美しく機能しますが、日本語では「まだ入るスペースがあるのに、勝手に改行して右側をスカスカにする」という、ありがた迷惑な挙動を引き起こします。
3. 【解決策】英語を守り、隙間を埋める魔法のCSS
「Apple」などの英単語が途中で途切れる（A-ppleになる）のを防ぎつつ、日本語の隙間をビシッと埋める修正コードです。
WordPressの「外観」＞「カスタマイズ」＞「追加CSS」（またはサイトエディターのスタイル内や子テーマのstyle.css）に貼り付けてください。
/* 記事本文とタイトルに限定して、狭い画面の改行余白バグを修正する */
.entry-content p, /* 本文内の段落 */
.entry-content li, /* 本文内のリスト（箇条書き） */
.entry-content h1, /* 本文内の見出し1 */
.entry-content h2, /* 本文内の見出し2 */
.entry-content h3, /* 本文内の見出し3 */
.entry-content h4, /* 本文内の見出し4 */
.entry-content h5, /* 本文内の見出し5 */
.entry-content h6, /* 本文内の見出し6 */
.entry-content blockquote, /* 本文内の引用ブロック */
article h1, /* 記事全体のメインタイトル */
.entry-title, /* 従来のテーマ用タイトルクラス */
.wp-block-post-title { /* ブロックテーマ用タイトルクラス */
text-wrap: wrap !important; /* 最新ブラウザの「お節介な改行調整」を無効化 */
word-break: normal !important; /* 英単語を途中でブチ切らないように守る */
overflow-wrap: break-word !important; /* 単語が枠を超える時だけ安全に折り返す */
line-break: loose !important; /* 日本語の改行ルールを緩和し、右側の隙間を最小限に */
}
4. なぜこのコードが「安全」で「最強」なのか
今回の修正には、プロ視点でのこだわりを詰め込んでいます。
- レイアウトが壊れない： 失敗につながりそうな「横幅100%」や「マージン0」などの指定は一切使っていません。テーマが持つ「中央寄せ」の仕組みはそのままに、文字の詰め方だけを直します。
- 限定的な適用： サイト全体ではなく
.entry-content（本文エリア）に絞っているため、他のカスタマイズパーツと喧嘩しません。 - 英単語を守る：
word-break: normalを入れているので、ブランド名などの英単語が改行で不自然に泣き別れになるのを防ぎます。 - 主要テーマに対応： Twenty Twenty-Five以外のテーマ（Twenty Twenty-Four、Twenty Twenty-Threeなど）でも効果を発揮します。
5. 適用後の確認ポイント
CSSを追加した後、以下の点を確認してください：
- ✅ iPhoneのSafariで投稿記事を表示（右側の余白が消えているか）
- ✅ デスクトップで画面幅を狭めてみる（不自然な改行がないか）
- ✅ 英単語が多い記事での表示（途中で切れていないか）
- ✅ リストや引用ブロックの表示
6. 最後に：焦ってサイトを消さないで！
複雑なCSSの問題にぶつかると「自分には才能がない」「もう嫌だ」と思ってしまいがちです。
でも、今回の件でわかったように、最新の技術が必ずしも「今の日本語」にとっての正解とは限りません。
古いAndroidが見せてくれた「素直な表示」こそが、私たちが求めていた答えでした。この数行のコードで、あなたの情熱が詰まったサイトが、最新の iPhone/Android でもデスクトップでも美しく表示されるようになりますように！
Author：對川 徹 - Toru Tsugawa（https://tsugawa.tv/）
Contact : https://tsugawa.biz/contact/
コメント
コメントを投稿